User list

This tailwind example is contributed by Anonymous, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Avatar Modal List Tag Cloud

Author Anonymous

Tailwind v3.4 958 1

Fork Fullscreen

<div class="bg-white min-w-[500px] shadow-sm border border-gray-200 rounded-lg p-1">
    <ul class="space-y-1">
      <li class="p-2 rounded-md bg-gray-100 duration-300 flex items-center gap-2">
        <img src="https://www.shutterstock.com/image-vector/blank-avatar-photo-place-holder-600nw-1114445501.jpg" alt="" class="w-12 h-12 rounded-full"/>
        <div>
          <span class="font-medium block">Yunus Emre K</span>
          <span class="text-gray-600 text-sm">1 days ago.</span>
        </div>
      </li>
        <li class="p-2 rounded-md hover:bg-gray-100 duration-300 flex items-center gap-2">
        <img src="https://www.shutterstock.com/image-vector/blank-avatar-photo-place-holder-600nw-1114445501.jpg" alt="" class="w-12 h-12 rounded-full"/>
        <div>
          <span class="font-medium block">Yunus Emre K</span>
          <span class="text-gray-600 text-sm">1 days ago.</span>
        </div>
      </li>
        <li class="p-2 rounded-md hover:bg-gray-100 duration-300 flex items-center gap-2">
        <img src="https://www.shutterstock.com/image-vector/blank-avatar-photo-place-holder-600nw-1114445501.jpg" alt="" class="w-12 h-12 rounded-full"/>
        <div>
          <span class="font-medium block">Yunus Emre K</span>
          <span class="text-gray-600 text-sm">1 days ago.</span>
        </div>
      </li>
        <li class="p-2 rounded-md hover:bg-gray-100 duration-300 flex items-center gap-2">
        <img src="https://www.shutterstock.com/image-vector/blank-avatar-photo-place-holder-600nw-1114445501.jpg" alt="" class="w-12 h-12 rounded-full"/>
        <div>
          <span class="font-medium block">Yunus Emre Karaoğlan</span>
          <span class="text-gray-600 text-sm">1 days ago.</span>
        </div>
      </li>
        <li class="p-2 rounded-md hover:bg-gray-100 duration-300 flex items-center gap-2">
        <img src="https://www.shutterstock.com/image-vector/blank-avatar-photo-place-holder-600nw-1114445501.jpg" alt="" class="w-12 h-12 rounded-full"/>
        <div>
          <span class="font-medium block">Yunus Emre K</span>
          <span class="text-gray-600 text-sm">1 days ago.</span>
        </div>
      </li>
        <li class="p-2 rounded-md hover:bg-gray-100 duration-300 flex items-center gap-2">
        <img src="https://www.shutterstock.com/image-vector/blank-avatar-photo-place-holder-600nw-1114445501.jpg" alt="" class="w-12 h-12 rounded-full"/>
        <div>
          <span class="font-medium block">Yunus Emre K</span>
          <span class="text-gray-600 text-sm">1 days ago.</span>
        </div>
      </li>
    </ul>
  </div>

</div>

Related Examples

Responsive list
Horizontal list of items

Sophia Baker

3 years ago

10.9k
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
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/

Achraf Testq

5 months ago

612
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

449
Modal multiple window

Maxim

2 years ago

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

Bonimater

1 year ago

1.6k
List with highlighted text

Amit Pachange

3 years ago

10.5k
purchase
buy car online

Nishimwe Jeanine

1 year ago

1.4k
Button cloud for categories,tags etc

Kris Showen

3 years ago

13.9k
Nested list section
List with soft background colors. List with Hierarchy

Orion.c

3 years ago

12.4k
Reward modal
A reward modal with refferal link

ehmasuk

1 year ago

782
Error popup modal

Jindřich Stoklasa

1 year ago

2.5k