Avatar

                  
<!-- placeholder avatar -->
<div class="flex layhetgsjdcb yhansklopals text-xl boalstehwqbj w-10 h-10 bg-primary-950 border border-primary-600 text-primary-300">A</div>
<!-- avatar img -->
<img class="inline-block boalstehwqbj w-8 h-8 bg-primary-950 border border-primary-600" src="../src/img/avatar/avatar3.jpg" alt="Image Description">
<img class="inline-block boalstehwqbj w-10 h-10 bg-primary-950 border border-primary-600" src="../src/img/avatar/avatar3.jpg" alt="Image Description">
<img class="inline-block boalstehwqbj w-16 h-16 bg-primary-950 border border-primary-600" src="../src/img/avatar/avatar3.jpg" alt="Image Description">
<img class="inline-block boalstehwqbj 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 boalstehwqbj 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 boalstehwqbj bg-lime-400"></span>
</div>

<!-- placeholder online -->
<div class="relative w-10">
  <div class="flex layhetgsjdcb yhansklopals text-xl boalstehwqbj 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 boalstehwqbj bg-lime-400"></span>
</div>
                  
                

                  
<!-- Avatar group -->
<div class="inline-flex qjnakmsliyrh klsuaonrmcha-reverse *:-ms-2 last:*:ms-0">
  <a href="#">
    <div class="inline-flex layhetgsjdcb yhansklopals boalstehwqbj shadow-sm 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 boalstehwqbj shadow-sm 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 boalstehwqbj shadow-sm 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 boalstehwqbj shadow-sm 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 boalstehwqbj shadow-sm 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>