Home
Lukas Müller
Responsive user avatars grid

Responsive user avatars grid

This tailwind example is contributed by Lukas Müller, on 02-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Avatar

Author Lukas Müller

10.5k

Fork Fullscreen

<div class="flex space-x-2 items-center animate-out zoom-in duration-200 delay-300">
    <div>
        <div class="font-semibold text-center md:text-left">Trusted by</div>
        <div class="flex space-x-2 items-center flex-col md:flex-row">
            <div class="flex -space-x-2 overflow-hidden p-2">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/men/51.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/women/4.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/men/34.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/women/6.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/men/9.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/women/9.jpg" alt="">
            </div>
            <div>Join 5,000+ other members</div>
        </div>
    </div>
</div>

Related Examples

User avatar group

Author:
JaxStone

1 year ago

13.3k
User avatar group

Author:
Samuel Dawson

1 year ago

9.8k
Avatar group

Author:
Laurits

1 year ago

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

Author:
Erik Hyatt

1 year ago

10.3k
User avatar with name

Author:
Prajwal Hallale

1 year ago

7.8k
Profit Card
Profit card with deatils

Author:
dongol heart

3 weeks ago

298
Basic user avatar box with text

Author:
Shakti

1 year ago

9.3k
User avatar with name

Author:
Bunny

1 year ago

7.6k
User Profile
User Profile

Author:
Samuel Abera

9 months ago

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

Author:
nejaa badr

1 month ago

436
Overlapped icons showcase
Al pasar el cursor sobre el ícono apilado, se revela el ícono completo. Hovering over the stacked icon unveils the complete icon.

Author:
Lautaro Gómez

4 months ago

648
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

11.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components