Avatar Stack

Preview

+5

Tailwind Classes

flex -space-x-2 [&>img]:ring-2 [&>img]:ring-white

CSS Code

.avatar-stack {
  display: flex;
}
.avatar-stack > * {
  margin-left: -0.5rem;
  box-shadow: 0 0 0 2px white;
}
.avatar-stack > *:first-child {
  margin-left: 0;
}

HTML Example

<div class="flex -space-x-2">
  <img src="/avatar1.jpg" class="w-10 h-10 rounded-full ring-2 ring-white" alt="User 1" />
  <img src="/avatar2.jpg" class="w-10 h-10 rounded-full ring-2 ring-white" alt="User 2" />
  <img src="/avatar3.jpg" class="w-10 h-10 rounded-full ring-2 ring-white" alt="User 3" />
  <span class="flex items-center justify-center w-10 h-10 rounded-full ring-2 ring-white bg-gray-200 text-sm font-medium">+5</span>
</div>

Use Cases

Browser Support

All modern browsers