divavatar-stackbeginner

Avatar Stack

Overlapping circular avatars in a horizontal stack with a count badge for extras.

Preview
AB
CD
EF
GH
+5
<div class="flex -space-x-3">
  <div class="w-10 h-10 rounded-full bg-red-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold">AB</div>
  <div class="w-10 h-10 rounded-full bg-blue-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold">CD</div>
  <div class="w-10 h-10 rounded-full bg-green-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold">EF</div>
  <div class="w-10 h-10 rounded-full bg-purple-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold">GH</div>
  <div class="w-10 h-10 rounded-full bg-gray-200 border-2 border-white flex items-center justify-center text-gray-600 text-xs font-bold">+5</div>
</div>

Color Breakdown

Avatar 1

bg-red-400

#f87171

Avatar 2

bg-blue-400

#60a5fa

Avatar 3

bg-green-400

#4ade80

Avatar 4

bg-purple-400

#c084fc

Count Badge

bg-gray-200

#e5e7eb

Border

border-white

#ffffff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:border-gray-900 dark:bg-gray-700 dark:text-gray-300

Use Cases

Team member listsShared project indicatorsCollaborator previews

Browser Support

All modern browsers.

Related Recipes

Toggle Button

button - intermediate

Testimonial Card

card - beginner

Profile Card

card - beginner

Radio Group Cards

input - intermediate

Success Alert

div - beginner

Error Alert

div - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I use real images instead of initials?▼
Replace the divs with <img src='url' class='w-10 h-10 rounded-full border-2 border-white object-cover' />.