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

535

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

3 years ago

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

1 year ago

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

Author:
Achraf Testq

5 days ago

56
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.7k
card

Author:
pablitodgb

9 months ago

861
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

3 years ago

13.4k
Features list with heading

Author:
Leon Bachmann

3 years ago

11.6k
Hierarchy list

Author:
Anonymous

2 years ago

10.9k
Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

10 months ago

752
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

3 years ago

20.4k
Stacked list

Author:
Odessa Young

3 years ago

19.3k
Event timeline list

Author:
Laurits

3 years ago

13.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components