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

11.4k

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

2 years ago

14.4k
User avatar group

Author:
Samuel Dawson

2 years ago

10.6k
Avatar group

Author:
Laurits

2 years ago

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

Author:
Erik Hyatt

2 years ago

11.2k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

2 months ago

705
User avatar with name

Author:
Bunny

2 years ago

8.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

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

6 months ago

1.8k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2k
Avatar with activity indicator
online indicator pulse animation

Author:
Prashant

2 years ago

9.7k
Basic user avatar box with text

Author:
Shakti

2 years ago

9.9k
User Profile
User Profile

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

1 year ago

5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components