Avatar

An example of a simple avatar component for your site.

Avatar Size

Image Description Image Description Image Description Image Description 
              
<!-- Avatar size -->
<img class="inline-block rounded-full shadow w-32 h-32 max-w-full bg-surface-400 dark:bg-surfacedark-400" src="../src/img/avatar.png" alt="Image Description">
<img class="inline-block rounded-full shadow w-24 h-24 max-w-full bg-surface-400 dark:bg-surfacedark-400" src="../src/img/avatar.png" alt="Image Description">
<img class="inline-block rounded-full shadow w-16 h-16 max-w-full bg-surface-400 dark:bg-surfacedark-400" src="../src/img/avatar.png" alt="Image Description">
<img class="inline-block rounded-full shadow w-10 h-10 max-w-full bg-surface-400 dark:bg-surfacedark-400" src="../src/img/avatar.png" alt="Image Description">

Avatar Group

Image Description Image Description Image Description Image Description 
              
<!-- Avatar group -->
<div class="relative">
  <a href="#">
    <img class="inline-block rounded-full shadow w-12 h-12 max-w-full bg-surface-400 dark:bg-surfacedark-400 -me-4 border-2 border-surface-500 dark:border-surfacedark-500 transform hover:-translate-y-1" src="../src/img/avatar.png" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-block rounded-full shadow w-12 h-12 max-w-full bg-surface-400 dark:bg-surfacedark-400 -me-4 border-2 border-surface-500 dark:border-surfacedark-500 transform hover:-translate-y-1" src="../src/img/avatar.png" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-block rounded-full shadow w-12 h-12 max-w-full bg-surface-400 dark:bg-surfacedark-400 -me-4 border-2 border-surface-500 dark:border-surfacedark-500 transform hover:-translate-y-1" src="../src/img/avatar.png" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-block rounded-full shadow w-12 h-12 max-w-full bg-surface-400 dark:bg-surfacedark-400 -me-4 border-2 border-surface-500 dark:border-surfacedark-500 transform hover:-translate-y-1" src="../src/img/avatar.png" alt="Image Description">
  </a>
</div>