- Components
- Avatar Group
Components
Tailwind CSS Avatar Group
An avatar group displays a number of avatars grouped together in a stack or grid.
Stack
Avatar group stacked small to large sizes.
<div class="flex -space-x-2">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img8.jpg" alt="Image Description">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img4.jpg" alt="Image Description">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
</div>
<div class="flex -space-x-2">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img8.jpg" alt="Image Description">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img4.jpg" alt="Image Description">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
</div>
<div class="flex -space-x-2">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img8.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img4.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
</div>
<div class="flex -space-x-2">
<img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img8.jpg" alt="Image Description">
<img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img4.jpg" alt="Image Description">
<img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
<img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
</div>
Grid
Avatar group displayed in a grid.
9+
<div class="grid grid-cols-3 gap-4">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img8.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img4.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img5.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img7.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img8.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="../docs/assets/img/100x100/img9.jpg" alt="Image Description">
<span class="inline-flex items-center justify-center h-[2.875rem] w-[2.875rem] rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-gray-600 dark:border-gray-700">
<span class="font-medium text-gray-500 leading-none dark:text-gray-400">9+</span>
</span>
</div>
Border color
The color of the border around the avatar. Any color that the CSS border-color property accepts can be used.
<div class="flex -space-x-2">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-blue-500" src="../docs/assets/img/100x100/img8.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-blue-500" src="../docs/assets/img/100x100/img4.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-blue-500" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-blue-500" src="../docs/assets/img/100x100/img7.jpg" alt="Image Description">
</div>
With dropdown
Display a group of avatars that do not fit with the dropdown menu by clicking or hovering on the initial.
Check out the full documentation on dropdowns.
<div class="flex -space-x-2">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="../docs/assets/img/100x100/img8.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="../docs/assets/img/100x100/img4.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="../docs/assets/img/100x100/img6.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="../docs/assets/img/100x100/img7.jpg" alt="Image Description">
<div class="hs-dropdown relative inline-flex" data-hs-dropdown-placement="top-left">
<button id="hs-dropdown-avatar-more" class="hs-dropdown-toggle inline-flex items-center justify-center h-[2.875rem] w-[2.875rem] rounded-full bg-gray-200 border-2 border-white font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-300 focus:outline-none focus:bg-blue-100 focus:text-blue-600 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-800 dark:text-gray-400 dark:hover:text-white dark:focus:bg-blue-100 dark:focus:text-blue-600 dark:focus:ring-offset-gray-800">
<span class="font-medium leading-none">9+</span>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-72 hidden z-10 transition-[margin,opacity] opacity-0 duration-300 mb-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Chris Lynch
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Maria Guan
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Amil Evara
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Ebele Egbuna
</a>
</div>
</div>
</div>