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

6 months ago

633
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)

6 months ago

488
Modal popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Lukas Müller

3 years ago

44.2k
Tag Cloud
Word/Tag cloud

Prajwal Hallale

3 years ago

11k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

R Thapa

3 years ago

18.4k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
modal
modal

aditya_sharma

2 months ago

305
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Sufyan jutt

11 months ago

833
PROCESS SELECTOR
Created was one shot generated using https://inspi.me

yogourt

9 months ago

510
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

9 months ago

990