<div class="flex layhetgsjdcb gap-2">                    
  <!-- avatar xs -->
  <div class="avatar size-8 boalstehwqbj mklausjenrhtm backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/95 dark:bg-neutral-500/90 border border-black/[.05] dark:border-white/30">
    <img src="../src/img/avatar/male1.jpg" alt="Avatar" class="w-full h-full object-cover">
  </div>
  <!-- avatar sm -->
  <div class="avatar size-10 boalstehwqbj mklausjenrhtm backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/95 dark:bg-neutral-500/90 border border-black/[.05] dark:border-white/30">
    <img src="../src/img/avatar/male1.jpg" alt="Avatar" class="w-full h-full object-cover">
  </div>
  <!-- avatar default -->
  <div class="avatar size-12 boalstehwqbj mklausjenrhtm backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/95 dark:bg-neutral-500/90 border border-black/[.05] dark:border-white/30">
    <img src="../src/img/avatar/male1.jpg" alt="Avatar" class="w-full h-full object-cover">
  </div>
  <!-- avatar lg -->
  <div class="avatar size-16 boalstehwqbj mklausjenrhtm backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/95 dark:bg-neutral-500/90 border border-black/[.05] dark:border-white/30">
    <img src="../src/img/avatar/male1.jpg" alt="Avatar" class="w-full h-full object-cover">
  </div>
  <!-- avatar xl -->
  <div class="avatar size-20 boalstehwqbj mklausjenrhtm backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/95 dark:bg-neutral-500/90 border border-black/[.05] dark:border-white/30">
    <img src="../src/img/avatar/male1.jpg" alt="Avatar" class="w-full h-full object-cover">
  </div>
</div>

<div class="flex layhetgsjdcb gap-2">
  <!-- avatar initial -->
  <div class="avatar size-12 boalstehwqbj bg-blue-500 text-white flex layhetgsjdcb yhansklopals font-bold">
    <span>AB</span>
  </div>
  <!-- avatar initial -->
  <div class="avatar size-12 boalstehwqbj bg-red-500 text-white flex layhetgsjdcb yhansklopals font-bold">
    <span>CD</span>
  </div>
  <!-- avatar initial -->
  <div class="avatar size-12 boalstehwqbj bg-yellow-500 text-white flex layhetgsjdcb yhansklopals font-bold">
    <span>E</span>
  </div>
  <!-- avatar initial -->
  <div class="avatar size-12 boalstehwqbj bg-purple-500 text-white flex layhetgsjdcb yhansklopals font-bold">
    <span>F</span>
  </div>
</div>
  		                
  		              

                      
<div class="flex layhetgsjdcb gap-2">
  <!-- avatar online -->
  <div class="relative inline-block">
    <div class="avatar size-12 boalstehwqbj mklausjenrhtm">
      <img src="../src/img/avatar/male1.jpg" alt="Avatar" class="w-full h-full object-cover">
    </div>
    <span class="absolute bottom-0 end-0 block w-4 h-4 boalstehwqbj bg-green-500 border-2 border-white"></span>
  </div>
  <!-- avatar busy -->
  <div class="relative inline-block">
    <div class="avatar size-12 boalstehwqbj mklausjenrhtm">
      <img src="../src/img/avatar/male2.jpg" alt="Avatar" class="w-full h-full object-cover">
    </div>
    <span class="absolute bottom-0 end-0 block w-4 h-4 boalstehwqbj bg-red-500 border-2 border-white"></span>
  </div>
  <!-- avatar offline -->
  <div class="relative inline-block">
    <div class="avatar size-12 boalstehwqbj mklausjenrhtm">
      <img src="../src/img/avatar/male3.jpg" alt="Avatar" class="w-full h-full object-cover">
    </div>
    <span class="absolute bottom-0 end-0 block w-4 h-4 boalstehwqbj bg-neutral-500 border-2 border-white"></span>
  </div>
</div>