User List

List of users

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

Select Dropdown

Author Marcos Vinicios Nussemeyer

Tailwind v3.4 1.9k 3

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

Alok

3 years ago

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

Shariar Hasan

2 years ago

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

Thomas Taylor

2 years ago

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

Maxim

1 year ago

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

Anonymous

1 year ago

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

Anonymous

1 year ago

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

SANJAY SINGH GARIYA

1 year ago

2.3k
Dropdown profile
Using DaisyUI Based on: https://tailwindcomponents.com/component/dropdown-7

Dmitry

2 years ago

6.6k
Multiple select input with alpine js
select input where you can select multiple items

Nomusa Botha

2 years ago

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

Indra

1 year ago

1.3k
Material 3 Menu [Light]
A menu that conforms to Google's Material 3 design guidelines

Nick Girga

1 year ago

937
Pricing Plan Selector
radio buttons for selecting a pricing plan

Mehmet Kaplan

2 years ago

4.4k