Avatar
<!-- small -->
<img src="../src/img/avatars/avatar2.jpg" alt="User Avatar" class="inline-block max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed boalstehwqbj h-10 w-10">
<!-- medium -->
<img src="../src/img/avatars/avatar2.jpg" alt="User Avatar" class="inline-block max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed boalstehwqbj h-16 w-16">
<!-- large -->
<img src="../src/img/avatars/avatar2.jpg" alt="User Avatar" class="inline-block max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed boalstehwqbj h-20 w-20">
Avatar Group
2+
<!-- avatar group -->
<div class="flex space-x-[-8px]">
<img src="../src/img/avatars/avatar2.jpg" alt="Avatar 1" class="inline-block boalstehwqbj size-10 max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed transform hover:-translate-y-1">
<img src="../src/img/avatars/avatar3.jpg" alt="Avatar 2" class="inline-block boalstehwqbj size-10 max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed transform hover:-translate-y-1">
<img src="../src/img/avatars/avatar4.jpg" alt="Avatar 3" class="inline-block boalstehwqbj size-10 max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed transform hover:-translate-y-1">
<div class="relative -ms-4">
<div class="absolute transform hover:-translate-y-1 bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed flex layhetgsjdcb yhansklopals h-10 w-10 boalstehwqbj text-xs">2+</div>
</div>
</div>