<div class="d-flex flex-column align-items-center justify-content-center pt-4 pb-3">
  <div class="position-relative px-2">
    <img src="./assets/img/team/2-austin-wade-X6Uj51n5CE8-unsplash.webp" class="sq-md rounded-circle" alt="Person" />
    <span class="d-block position-absolute bottom-0 start-0 ms-1 mb-1 w-10px h-10px rounded-circle bg-success animate-pulse-dark"> <span class="visually-hidden">User online</span> </span>
  </div>
  <span class="text-gray-800 fw-semibold">Jim Jones</span> <a href="#" class="op-7 link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Profile</a> 
</div>
<!-- Avatar small -->
<div class="d-flex flex-column align-items-center justify-content-center pt-4 pb-3 text-sm">
  <div class="position-relative px-2">
    <img src="./assets/img/team/2-austin-wade-X6Uj51n5CE8-unsplash.webp" class="sq-sm rounded-circle" alt="user photo">
    <span class="d-block position-absolute bottom-0 start-0 ms-1 mb-1 w-10px h-10px rounded-circle bg-success animate-pulse-dark"> <span class="visually-hidden">User online</span> </span>
  </div>
  <span class="text-gray-800 fw-semibold">Jim Jones</span> <a href="#" class="op-7 link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Profile</a> 
</div>

<div class="d-flex flex-column align-items-center justify-content-center pt-4 pb-3 bg-dark">
  <div class="position-relative px-2">
    <img src="./assets/img/team/2-austin-wade-X6Uj51n5CE8-unsplash.webp" class="sq-md rounded-circle" alt="Person" />
    <span class="d-block position-absolute bottom-0 start-0 ms-1 mb-1 w-10px h-10px rounded-circle bg-success animate-pulse-light"> <span class="visually-hidden">User online</span> </span>
  </div>
  <span class="text-gray-200 fw-semibold">Jim Jones</span> <a href="#" class="op-7 link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Profile</a> 
</div>
<!-- Avatar small -->
<div class="d-flex flex-column align-items-center justify-content-center pt-4 pb-3 text-sm bg-dark">
  <div class="position-relative px-2">
    <img src="./assets/img/team/2-austin-wade-X6Uj51n5CE8-unsplash.webp" class="sq-sm rounded-circle" alt="user photo">
    <span class="d-block position-absolute bottom-0 start-0 ms-1 mb-1 w-10px h-10px rounded-circle bg-success animate-pulse-light"> <span class="visually-hidden">User online</span> </span>
  </div>
  <span class="text-gray-200 fw-semibold">Jim Jones</span> <a href="#" class="op-7 link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Profile</a> 
</div>

<div class="d-flex align-items-center justify-content-center pt-4 pb-3">
  <div>
    <img src="./assets/img/team/1-art-hauntington-jzY0KRJopEI-unsplash.webp" class="sq-md rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 2">
  </div>
  <div class="ms-n2">
    <img src="./assets/img/team/2-austin-wade-X6Uj51n5CE8-unsplash.webp" class="sq-md rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 3">
  </div>
  <div class="ms-n2">
    <img src="./assets/img/team/3-denis-agati--5Vl9oimYlU-unsplash.webp" class="sq-md rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 4">
  </div>
  <div class="ms-n2">
    <img src="./assets/img/team/4-rachel-mcdermott-0fN7Fxv1eWA-unsplash.webp" class="sq-md rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 5">
  </div>
  <div class="ms-n2">
    <img src="./assets/img/team/5-harps-joseph-tAvpDE7fXgY-unsplash.webp" class="sq-md rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 5">
  </div>
  <div class="ms-n2">
    <div class="sq-md rounded-circle border border-white border-2 bg-dark text-white d-flex align-items-center justify-content-center" data-bs-toggle="tooltip" title="10 more users online">+10</div>
  </div>
</div>
<div class="d-flex align-items-center justify-content-center pt-4 pb-3">
  <div>
    <img src="./assets/img/team/1-art-hauntington-jzY0KRJopEI-unsplash.webp" class="sq-sm rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 2">
  </div>
  <div class="ms-n1">
    <img src="./assets/img/team/2-austin-wade-X6Uj51n5CE8-unsplash.webp" class="sq-sm rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 3">
  </div>
  <div class="ms-n1">
    <img src="./assets/img/team/3-denis-agati--5Vl9oimYlU-unsplash.webp" class="sq-sm rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 4">
  </div>
  <div class="ms-n1">
    <img src="./assets/img/team/4-rachel-mcdermott-0fN7Fxv1eWA-unsplash.webp" class="sq-sm rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 5">
  </div>
  <div class="ms-n1">
    <img src="./assets/img/team/5-harps-joseph-tAvpDE7fXgY-unsplash.webp" class="sq-sm rounded-circle border border-white border-2" alt="user photo" data-bs-toggle="tooltip" title="User 5">
  </div>
  <div class="ms-n1">
    <div class="sq-sm rounded-circle border border-white border-2 bg-dark text-white d-flex align-items-center justify-content-center" data-bs-toggle="tooltip" title="10 more users online">+10</div>
  </div>
</div>

<div class="sq-md rounded-circle border border-white border-2 bg-dark text-white d-flex align-items-center justify-content-center" data-bs-toggle="tooltip" title="Jim Jones">JJ</div>
<div class="sq-sm rounded-circle border border-white border-2 bg-dark text-white d-flex align-items-center justify-content-center text-xs" data-bs-toggle="tooltip" title="Jim Jones">JJ</div>