Home
Laurits
Avatar group

Avatar group

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

Avatar

Author Laurits

8.8k

12

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

Author:
JaxStone

2 years ago

13.9k
User avatar group

Author:
Samuel Dawson

2 years ago

10.2k
Responsive user avatars grid

Author:
Lukas Müller

2 years ago

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

Author:
Erik Hyatt

1 year ago

10.8k
Avatar Initial placeholder

Author:
Mr Robot

2 years ago

10.4k
User avatar with name

Author:
Bunny

2 years ago

8.1k
Avatar Group

Author:
Mohit Prajapati

2 years ago

9.1k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

5 months ago

2.3k
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.

Author:
Abhiraj

2 months ago

721
Profit Card
Profit card with deatils

Author:
dongol heart

4 months ago

775
User avatar with name

Author:
Prajwal Hallale

1 year ago

7.9k
Food delivery ecommerce Card

Author:
Samuel Abera

2 months ago

602

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1