<!-- placeholder avatar -->
<div class="hsdfdsfhsdf pdskdmsdnjw justify-center text-xl rounded-full w-10 h-10 border border-black bg-white dark:bg-neutral-500">A</div>
<!-- avatar img -->
<img class="inline-block rounded-full w-8 h-8 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
<img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
<img class="inline-block rounded-full w-14 h-14 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
<img class="inline-block rounded-full w-16 h-16 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
<img class="inline-block rounded-full w-20 h-20 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
              
            

              
<!-- avatar online -->
<div class="relative w-10">
  <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
  <span class="raiytahskcn bottom-0 end-0 block size-3 border border-black rounded-full bg-lime-300"></span>
</div>

<!-- placeholder online -->
<div class="relative w-10">
  <div class="hsdfdsfhsdf pdskdmsdnjw justify-center text-xl rounded-full w-10 h-10 border border-black bg-white dark:bg-neutral-500">A</div>
  <span class="raiytahskcn bottom-0 end-0 block size-3 border border-black rounded-full bg-lime-300"></span>
</div>
              
            

              
<!-- Avatar group -->
<div class="relative">
  <a href="#">
    <img class="inline-hsdfdsfhsdf rounded-full shadow w-10 h-10 max-w-full bg-white dark:bg-neutral-500 -me-3 border border-black transform hover:-translate-y-0.5" src="../src/img/avatar/male2.jpg" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-hsdfdsfhsdf rounded-full shadow w-10 h-10 max-w-full bg-white dark:bg-neutral-500 -me-3 border border-black transform hover:-translate-y-0.5" src="../src/img/avatar/male3.jpg" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-hsdfdsfhsdf rounded-full shadow w-10 h-10 max-w-full bg-white dark:bg-neutral-500 -me-3 border border-black transform hover:-translate-y-0.5" src="../src/img/avatar/male4.jpg" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-hsdfdsfhsdf rounded-full shadow w-10 h-10 max-w-full bg-white dark:bg-neutral-500 -me-3 border border-black transform hover:-translate-y-0.5" src="../src/img/avatar/male5.jpg" alt="Image Description">
  </a>
  <a href="#">
    <div class="inline-hsdfdsfhsdf pdskdmsdnjw justify-center rounded-full shadow w-10 h-10 max-w-full bg-white dark:bg-neutral-500 -me-3 border border-black transform hover:-translate-y-0.5 text-sm">12+</div>
  </a>
</div>