User List

List of users

This tailwind example is contributed by Marcos Vinicios Nussemeyer, on 18-Apr-2025. Component is made with Tailwind CSS v3. It is responsive.

Select Dropdown

Author Marcos Vinicios Nussemeyer

1.4k

Fork Fullscreen

<div class="bg-zinc-900 dark:bg-zinc-900 flex justify-center items-center w-screen h-screen p-5">
  <div class="border border-gray-800 shadow-gray-800 shadow-md max-w-2xl p-6 rounded-lg dark:bg-gray-700 dark:text-gray-300">
    <ul role="list" class="divide-y divide-gray-600">
      <li class="flex justify-between gap-x-6 py-5 px-5 hover:bg-zinc-800 cursor-pointer">
        <div class="flex min-w-0 gap-x-4">
          <img class="size-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
          <div class="min-w-0 flex-auto">
            <p class="text-sm/6 font-semibold text-gray-300">Tearchoi</p>
            <p class="mt-1 truncate text-xs/5 text-gray-500">@Tearchoi</p>
          </div>
        </div>
        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
          <div class="mt-1 flex items-center gap-x-1.5">
            <div class="flex-none rounded-full bg-green-500/20 p-1">
              <div class="size-1.5 rounded-full bg-green-500 animate-pulse"></div>
            </div>
            <p class="text-xs/5 text-gray-500">Online</p>
          </div>
        </div>
      </li>
      <li class="flex justify-between gap-x-6 py-5 px-5 hover:bg-zinc-800 cursor-pointer">
        <div class="flex min-w-0 gap-x-4">
          <img class="size-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
          <div class="min-w-0 flex-auto">
            <p class="text-sm/6 font-semibold text-gray-300">Brassel</p>
            <p class="mt-1 truncate text-xs/5 text-gray-500">@Brassel</p>
          </div>
        </div>
        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
          <div class="mt-1 flex items-center gap-x-1.5">
            <div class="flex-none rounded-full bg-green-500/20 p-1">
              <div class="size-1.5 rounded-full bg-green-500 animate-pulse"></div>
            </div>
            <p class="text-xs/5 text-gray-500">Online</p>
          </div>
        </div>
      </li>
      <li class="flex justify-between gap-x-6 py-5 px-5 hover:bg-zinc-800 cursor-pointer">
        <div class="flex min-w-0 gap-x-4">
          <img class="size-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
          <div class="min-w-0 flex-auto">
            <p class="text-sm/6 font-semibold text-gray-300">JuzMyhero</p>
            <p class="mt-1 truncate text-xs/5 text-gray-500">@JuzMyhero</p>
          </div>
        </div>
        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
          <div class="mt-1 flex items-center gap-x-1.5">
            <div class="flex-none rounded-full bg-red-500/20 p-1">
              <div class="size-1.5 rounded-full bg-red-600"></div>
            </div>
            <p class="text-xs/5 text-gray-500">Offline</p>
          </div>
        </div>
      </li>
      <li class="flex justify-between gap-x-6 py-5 px-5 hover:bg-zinc-800 cursor-pointer">
        <div class="flex min-w-0 gap-x-4">
          <img class="size-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
          <div class="min-w-0 flex-auto">
            <p class="text-sm/6 font-semibold text-gray-300">VividLol</p>
            <p class="mt-1 truncate text-xs/5 text-gray-500">@VividLol</p>
          </div>
        </div>
        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
          <div class="mt-1 flex items-center gap-x-1.5">
            <div class="flex-none rounded-full bg-red-500/20 p-1">
              <div class="size-1.5 rounded-full bg-red-600"></div>
            </div>
            <p class="text-xs/5 text-gray-500">Offline</p>
          </div>
        </div>
      </li>
      <li class="flex justify-between gap-x-6 py-5 px-5 hover:bg-zinc-800 cursor-pointer">
        <div class="flex min-w-0 gap-x-4">
          <img class="size-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
          <div class="min-w-0 flex-auto">
            <p class="text-sm/6 font-semibold text-gray-300">Courtney Henry</p>
            <p class="mt-1 truncate text-xs/5 text-gray-500">courtney.henry</p>
          </div>
        </div>
        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
          <div class="mt-1 flex items-center gap-x-1.5">
            <div class="flex-none rounded-full bg-red-500/20 p-1">
              <div class="size-1.5 rounded-full bg-red-600"></div>
            </div>
            <p class="text-xs/5 text-gray-500">Offline</p>
          </div>
        </div>
      </li>
      <li class="flex justify-between gap-x-6 py-5 px-5 hover:bg-zinc-800 cursor-pointer">
        <div class="flex min-w-0 gap-x-4">
          <img class="size-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
          <div class="min-w-0 flex-auto">
            <p class="text-sm/6 font-semibold text-gray-300">Chattype</p>
            <p class="mt-1 truncate text-xs/5 text-gray-500">@Chattype</p>
          </div>
        </div>
        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
          <div class="mt-1 flex items-center gap-x-1.5">
            <div class="flex-none rounded-full bg-green-500/20 p-1">
              <div class="size-1.5 rounded-full bg-green-500 animate-pulse"></div>
            </div>
            <p class="text-xs/5 text-gray-500">Online</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Related Examples

Dropdown select on hover
this example does not uses javascript

Author:
Alok

2 years ago

30.5k
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Author:
Shariar Hasan

1 year ago

6.3k
Dropdown select on hover
this example does not uses javascript

Author:
Thomas Taylor

1 year ago

2.6k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Maxim

1 year ago

5.2k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

11 months ago

1.9k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

11 months ago

1.3k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
SANJAY SINGH GARIYA

8 months ago

1.1k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

5 months ago

522
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

2 years ago

10.2k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

9 months ago

832
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.7k
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components