User avatar group

This tailwind example is contributed by Samuel Dawson, on 27-Jan-2023. Component is made with Tailwind v3.4.

Avatar

Author Samuel Dawson

Tailwind v3.4 12.5k 14

Fork Fullscreen

<div class="flex -space-x-2">
    <img class="z-40 inline-block border border-cyan-500 h-20 w-20 rounded-full ring-2 ring-white ring-opacity-50" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
    <img class="z-30 inline-block border border-cyan-500 h-20 w-20 rounded-full ring-2 ring-white ring-opacity-50" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
    <img class="z-20 inline-block border border-cyan-500 h-20 w-20 rounded-full ring-2 ring-white ring-opacity-50" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80" alt="">
    <img class="z-10 inline-block border border-cyan-500 h-20 w-20 rounded-full ring-2 ring-white ring-opacity-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
</div>

Related Examples

User avatar group

JaxStone

3 years ago

15.6k
Avatar group

Laurits

3 years ago

10k
Responsive user avatars grid

Lukas Müller

3 years ago

12.2k
Avatar Group

Mohit Prajapati

4 years ago

10.4k
Avatar Initial placeholder

Mr Robot

4 years ago

12.1k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
User Avatars

Sophia Baker

3 years ago

12.1k
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/

Achraf Testq

6 months ago

629
Avatar
This Avatar component includes: 1. Responsive design using Tailwind CSS classes 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User avatar with hover effect and online status indicator 5. User name and role 6. Follow button with hover effect 7. Follower count 8. Subtle animations and transitions 9. Accessibility considerations (proper contrast, focus states) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The avatar card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - The avatar image has a border color that changes in dark mode - The avatar has a scale effect on hover and a ring appears around it - The Follow button uses Indigo-800 with a Blue-900 hover state - The card has a shadow effect that changes color on hover - Dark mode is automatically applied based on system preferences - The entire card has a subtle transition effect for smooth color changes - Proper focus states are implemented for the button This design provides a clean, interactive avatar component while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

1 year ago

3k
User Profile
User Profile

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

2 years ago

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

Alif Bima Pradana

8 months ago

837
Stacked Profile
Stacked profile images

Mitch Chimwemwe Chanza

2 years ago

8.1k

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.