Home
Anonymous
User list

User list

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

Avatar Modal List Tag Cloud

Author Anonymous

303

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

Author:
Sophia Baker

2 years ago

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

9 months ago

2.3k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

44
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

1 year ago

7.8k
Order Delivered List

Author:
ABDO-SY

6 months ago

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

Author:
Anonymous

7 months ago

497
Projects List

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

9 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

447
Sign in Modal
Login to continue modal

Author:
Anonymous

1 year ago

1.6k
Feature list
list section

Author:
Gopi Yadav

2 years ago

10.5k
visit
to known any thin

Author:
Nishimwe Jeanine

4 months ago

290
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

2 years ago

6.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components