Responsive user avatars grid

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

Avatar

Author Lukas Müller

Tailwind v3.4 12.2k 14

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

JaxStone

3 years ago

15.6k
User avatar group

Samuel Dawson

3 years ago

12.5k
Avatar group

Laurits

3 years ago

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

Erik Hyatt

3 years ago

11.9k
Avatar Initial placeholder

Mr Robot

4 years ago

12.1k
Avatar
Avatar

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

2 years ago

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

Abhiraj

1 year ago

4.4k
Avatar Group

Mohit Prajapati

4 years ago

10.4k
User Avatars

Sophia Baker

3 years ago

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

Nick Girga

1 year ago

1.1k
Latest Blog Card Components
Stay ahead of the curve with fresh content on code, design, startups, and everything in between.

Alif Bima Pradana

8 months ago

454
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/

Hasan AlDoy (McDoy)

5 months ago

481