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

2 years ago

14.7k
User avatar group

Author:
Samuel Dawson

2 years ago

10.8k
Avatar group

Author:
Laurits

2 years ago

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

Author:
Erik Hyatt

2 years ago

11.2k
Shoe Card Grid
A responsive grid of three shoe cards with hover effects, featuring images, titles, descriptions, prices, and a "Shop Now" button.

Author:
Sudip chaudhary

3 months ago

290
Ripple Animation

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

6 months ago

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

4 months ago

1k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

11 months ago

3.2k
Avatar
Avatar

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

1 year ago

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

8 months ago

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

4 months ago

260
Avatar with Gradient Shadow

Author:
Prajwal Hallale

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components