Avatar group

This tailwind example is contributed by Laurits, on 17-Feb-2023. Component is made with Tailwind v3.4. It is responsive.

Avatar

Author Laurits

Tailwind v3.4 10k 18

Fork Fullscreen

<div class="z-0 flex items-center -space-x-2">
    <div
        class="relative z-0 flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
        <img class="h-full w-full rounded-full object-cover object-center" src="https://randomuser.me/api/portraits/thumb/women/75.jpg">
    </div>
    <div
        class="relative z-10 flex h-12 w-12 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
        <img class="h-full w-full rounded-full object-cover object-center" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
    </div>
    <div
        class="relative z-20 flex h-16 w-16 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
        <img class="h-full w-full rounded-full object-cover object-center" src="https://randomuser.me/api/portraits/thumb/women/75.jpg">
    </div>
    <div
        class="relative z-10 flex h-12 w-12 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
        <img class="h-full w-full rounded-full object-cover object-center" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
    </div>
    <div
        class="relative z-0 flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
        <img class="h-full w-full rounded-full object-cover object-center" src="https://randomuser.me/api/portraits/thumb/women/75.jpg">
    </div>
</div>

Related Examples

User avatar group

JaxStone

3 years ago

15.6k
User avatar group

Samuel Dawson

3 years ago

12.4k
Responsive user avatars grid

Lukas Müller

3 years ago

12.2k
Product rating section
display star rating stats with user avatars

Erik Hyatt

3 years ago

11.9k
User Avatars

Sophia Baker

3 years ago

12.1k
Flex Profile
Tailwind Flex User Profile

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

2 years ago

4.8k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
Avatar with Gradient Shadow

Prajwal Hallale

3 years ago

10.2k
User avatar with name

Prajwal Hallale

3 years ago

8k
Food delivery ecommerce Card

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

1 year ago

2.8k
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2.5k

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.