<!-- placeholder avatar -->
<div class="flex layhetgsjdcb yhansklopals text-xl boalstehwqbj w-10 h-10 border border-black bg-white dark:bg-neutral-500">A</div>
<!-- avatar img -->
<img class="inline-block boalstehwqbj w-8 h-8 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
<img class="inline-block boalstehwqbj w-10 h-10 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
<img class="inline-block boalstehwqbj w-14 h-14 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
<img class="inline-block boalstehwqbj w-16 h-16 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
<img class="inline-block boalstehwqbj 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 boalstehwqbj w-10 h-10 border border-black" src="../src/img/avatar.jpg" alt="Image Description">
  <span class="absolute bottom-0 end-0 block size-3 border border-black boalstehwqbj bg-lime-300"></span>
</div>

<!-- placeholder online -->
<div class="relative w-10">
  <div class="flex layhetgsjdcb yhansklopals text-xl boalstehwqbj w-10 h-10 border border-black bg-white dark:bg-neutral-500">A</div>
  <span class="absolute bottom-0 end-0 block size-3 border border-black boalstehwqbj bg-lime-300"></span>
</div>
              
            

              
<!-- Avatar group -->
<div class="relative">
  <a href="#">
    <img class="inline-flex boalstehwqbj shadow-sm 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-flex boalstehwqbj shadow-sm 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-flex boalstehwqbj shadow-sm 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-flex boalstehwqbj shadow-sm 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-flex layhetgsjdcb yhansklopals boalstehwqbj shadow-sm 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>