N
eudash

Avatar

User Avatar User Avatar User Avatar 
            
<!-- small -->
<img src="../src/img/avatars/avatar2.jpg" alt="User Avatar" class="inline-block rounded-full max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed rounded-full h-10 w-10">

<!-- medium -->
<img src="../src/img/avatars/avatar2.jpg" alt="User Avatar" class="inline-block rounded-full max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed rounded-full h-16 w-16">

<!-- large -->
<img src="../src/img/avatars/avatar2.jpg" alt="User Avatar" class="inline-block rounded-full max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed rounded-full h-20 w-20">

Avatar Group

Avatar 1 Avatar 2 Avatar 3
2+
            
<!-- avatar group -->
<div class="flex space-x-[-8px]">
  <img src="../src/img/avatars/avatar2.jpg" alt="Avatar 1" class="inline-block rounded-full w-10 h-10 max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed rounded-full h-10 w-10 transform hover:-translate-y-1">

  <img src="../src/img/avatars/avatar3.jpg" alt="Avatar 2" class="inline-block rounded-full w-10 h-10 max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed rounded-full h-10 w-10 transform hover:-translate-y-1">

  <img src="../src/img/avatars/avatar4.jpg" alt="Avatar 3" class="inline-block rounded-full w-10 h-10 max-w-full bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset-fixed rounded-full h-10 w-10 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 items-center justify-center h-10 w-10 rounded-full text-xs">2+</div>
  </div>
</div>