Avatars - Htmlwind

Stacked avatars

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive.

Avatar

Author Htmlwind

Tailwind v3.4 1.3k 7

Fork Fullscreen

<div class="bg-white py-12">
      <div class="mx-auto flex max-w-2xl flex-col items-start gap-y-6 px-8 sm:flex-row sm:items-center sm:justify-around">
        
        <div class="flex items-center -space-x-3.5">
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
        </div>
        
        <div class="flex items-center -space-x-3">
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
        </div>
        
        <div class="flex items-center -space-x-1.5">
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
        </div>
      </div>
    </div>

Related Examples

DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.4k
User Avatars

Sophia Baker

3 years ago

12.1k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

9 months ago

995
User avatar with name

Bunny

3 years ago

10k
User avatar group

JaxStone

3 years ago

15.7k
Avatar Initial placeholder

Mr Robot

4 years ago

12.1k
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

9 months ago

844
Food delivery ecommerce Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.9k
User list
User list

Anonymous

1 year ago

975
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Abhiraj

1 year ago

4.4k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

489
Avatar Group

Mohit Prajapati

4 years ago

10.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.