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

842

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

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

Author:
Shariar Hasan

1 year ago

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

Author:
Thomas Taylor

1 year ago

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

9 months ago

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

Author:
Anonymous

6 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:
Anonymous

6 months ago

925
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

3 months ago

399
Dropdown
hover dropdown with width of max-w-7xl

Author:
Bernard Omuse

11 months ago

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

1 week ago

34
Multiple select input with alpine js
select input where you can select multiple items

Author:
Nomusa Botha

1 year ago

5k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

9.8k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

4 months ago

585

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components