Avatar

                  
<!-- placeholder avatar -->
<div class="flex olwuyhsbcnmdj qaksleiuryhnv text-xl rounded-full w-10 h-10 bg-primary-950 border border-primary-600 text-primary-300">A</div>
<!-- avatar img -->
<img class="inline-block rounded-full w-8 h-8 bg-primary-950 border border-primary-600" src="../src/img/avatar/avatar3.jpg" alt="Image Description">
<img class="inline-block rounded-full w-10 h-10 bg-primary-950 border border-primary-600" src="../src/img/avatar/avatar3.jpg" alt="Image Description">
<img class="inline-block rounded-full w-16 h-16 bg-primary-950 border border-primary-600" src="../src/img/avatar/avatar3.jpg" alt="Image Description">
<img class="inline-block rounded-full w-20 h-20 bg-primary-950 border border-primary-600" src="../src/img/avatar/avatar3.jpg" alt="Image Description">
                  
                

                  
<!-- avatar online -->
<div class="relative w-10">
  <img class="inline-block rounded-full w-10 h-10 bg-primary-950 border border-primary-600" src="../src/img/avatar/avatar1.jpg" alt="Image Description">
  <span class="absolute bottom-0 end-0 block size-3 rounded-full bg-lime-400"></span>
</div>

<!-- placeholder online -->
<div class="relative w-10">
  <div class="flex olwuyhsbcnmdj qaksleiuryhnv text-xl rounded-full w-10 h-10 bg-primary-950 border border-primary-600 text-primary-300">A</div>
  <span class="absolute bottom-0 end-0 block size-3 rounded-full bg-lime-400"></span>
</div>
                  
                

                  
<!-- Avatar group -->
<div class="inline-flex tyahsjmenajsk lkagdteuqnvdg-reverse *:-ms-2 last:*:ms-0">
  <a href="#">
    <div class="inline-flex olwuyhsbcnmdj qaksleiuryhnv rounded-full shadow w-10 h-10 max-w-full bg-primary-950 border border-primary-600 transform hover:-translate-y-0.5 text-sm text-primary-300">12+</div>
  </a>
  <a href="#">
    <img class="inline-flex rounded-full shadow w-10 h-10 max-w-full bg-primary-950 border border-primary-600 transform hover:-translate-y-0.5" src="../src/img/avatar/avatar2.jpg" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-flex rounded-full shadow w-10 h-10 max-w-full bg-primary-950 border border-primary-600 transform hover:-translate-y-0.5" src="../src/img/avatar/avatar3.jpg" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-flex rounded-full shadow w-10 h-10 max-w-full bg-primary-950 border border-primary-600 transform hover:-translate-y-0.5" src="../src/img/avatar/avatar4.jpg" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-flex rounded-full shadow w-10 h-10 max-w-full bg-primary-950 border border-primary-600 transform hover:-translate-y-0.5" src="../src/img/avatar/avatar6.jpg" alt="Image Description">
  </a>
</div>