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

9.6k

15

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

14.8k
User avatar group

Author:
Samuel Dawson

2 years ago

11.4k
Responsive user avatars grid

Author:
Lukas Müller

2 years ago

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

Author:
Erik Hyatt

2 years ago

11.4k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

3.8k
Avatar with Gradient Shadow

Author:
Prajwal Hallale

2 years ago

10.1k
Profile Card
Show more details on hover

Author:
Tamani Phiri

2 years ago

14.4k
Flex Profile
Tailwind Flex User Profile

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

Author:
Ameth Galarcio

9 months ago

1.7k
Avatars - Htmlwind
Stacked avatars

Author:
Htmlwind

6 months ago

430
Elegant Avatars
Useful Tailwind classes for constructing avatars with status markers. Comes with an example edit/preview avatar for the user to choose an image with the file chooser.

Author:
Nick Girga

7 months ago

281
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Author:
Bonimater

6 months ago

532

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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.12