<!-- 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/avatars/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/avatars/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/avatars/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/avatars/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/avatars/male1.jpg" alt="Avatar" class="w-full h-full object-cover">
</div>
<!-- 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>
<!-- avatar online -->
<div class="relative inline-block">
<div class="avatar size-12 boalstehwqbj mklausjenrhtm">
<img src="../src/img/avatars/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/avatars/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/avatars/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>
<!-- Avatar Group -->
<div class="flex layhetgsjdcb klsuaonrmcha-reverse *:-ms-2 last:*:ms-0">
<!-- +3 Avatar -->
<div class="hover:-translate-y-0.5 size-12 boalstehwqbj bg-neutral-300 text-neutral-700 flex layhetgsjdcb yhansklopals font-medium">
+3
</div>
<!-- Avatar 1 -->
<div class="hover:-translate-y-0.5 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/avatars/male1.jpg" alt="Avatar 1" class="w-full h-full object-cover">
</div>
<!-- Avatar 2 -->
<div class="hover:-translate-y-0.5 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/avatars/male2.jpg" alt="Avatar 2" class="w-full h-full object-cover">
</div>
<!-- Avatar 3 -->
<div class="hover:-translate-y-0.5 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/avatars/male3.jpg" alt="Avatar 3" class="w-full h-full object-cover">
</div>
<!-- Avatar 4 -->
<div class="hover:-translate-y-0.5 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/avatars/male4.jpg" alt="Avatar 4" class="w-full h-full object-cover">
</div>
</div>
