Tailwind CSS cookbook · Beginner
Display an overlapping avatar group
Show a row of user avatars that overlap, with a '+N' counter for the rest.
Approach
Use negative horizontal spacing (-space-x-3) so avatars overlap, and a white ring to separate them.
Solution
<div class="flex items-center p-6">
<div class="flex -space-x-3">
<span class="grid size-10 place-items-center rounded-full bg-sky-500 font-semibold text-white ring-2 ring-white">AL</span>
<span class="grid size-10 place-items-center rounded-full bg-amber-500 font-semibold text-white ring-2 ring-white">GH</span>
<span class="grid size-10 place-items-center rounded-full bg-emerald-500 font-semibold text-white ring-2 ring-white">AT</span>
<span class="grid size-10 place-items-center rounded-full bg-slate-200 text-sm font-medium text-slate-700 ring-2 ring-white">+5</span>
</div>
<p class="ml-4 text-sm text-slate-600">8 people are viewing this</p>
</div>
Pitfalls
- Initials without a text alternative for screen readers; add
titleoraria-labelwith the full name.
Variations
- Use real images with
size-10 rounded-full object-cover.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/space