Home
Htmlwind
Avatars - Htmlwind

Avatars - Htmlwind

Stacked avatars

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Avatar

Author Htmlwind

442

6

Fork Fullscreen

<div class="bg-white py-12">
      <div class="mx-auto flex max-w-2xl flex-col items-start gap-y-6 px-8 sm:flex-row sm:items-center sm:justify-around">
        
        <div class="flex items-center -space-x-3.5">
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
        </div>
        
        <div class="flex items-center -space-x-3">
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
        </div>
        
        <div class="flex items-center -space-x-1.5">
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&amp;w=256&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
          <span class="relative -m-0.5 rounded-full bg-white p-0.5">
            <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&amp;w=256&amp;h=256&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
          </span>
        </div>
      </div>
    </div>

Related Examples

Avatar with activity indicator
online indicator pulse animation

Author:
Prashant

3 years ago

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

1 year ago

2.4k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

9 months ago

930
Avatar with Gradient Shadow

Author:
Prajwal Hallale

2 years ago

10.2k
Components

Author:
pablitodgb

7 months ago

365
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.7k
User avatar with name

Author:
Bunny

3 years ago

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

9 months ago

1.9k
Profile Card
Show more details on hover

Author:
Tamani Phiri

2 years ago

14.6k
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Author:
Bonimater

9 months ago

793
User Avatars

Author:
Sophia Baker

3 years ago

11.1k
Avatar Group

Author:
Mohit Prajapati

3 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12