Drop Down

This component is a Select Input Or Dropdown UI & Dark mode Supported Component

This tailwind example is contributed by Shariar Hasan, on 15-Feb-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Select Dropdown

Author Shariar Hasan

Tailwind v3.4 7k 8

Fork Fullscreen

<div class="flex w-screen h-screen dark:bg-gray-900 justify-center items-center">
	<div class="w-[150px] text-gray-900 dark:text-gray-100">
	<div class="relative w-full group">
		<label class="text-xs text-gray-400">Select Category</label><button class="py-2.5 px-3 w-full md:text-sm text-site bg-transparent border border-dimmed  focus:border-brand focus:outline-none focus:ring-0 peer flex items-center justify-between rounded font-semibold">All</button>
		<div
			class="absolute z-[99] top-[100%] left-[50%] translate-x-[-50%] rounded-md overflow-hidden shadow-lg min-w-[200px] w-max peer-focus:visible peer-focus:opacity-100 opacity-0 invisible duration-200 p-1 bg-gray-100 dark:bg-gray-800  border border-dimmed text-xs md:text-sm">
			<div
				class=" w-full block cursor-pointer hover:bg-white dark:hover:bg-gray-900 dark:bg-gray-800 hover:text-link px-3 py-2 rounded-md">
				All (9)</div>
			<div
				class=" w-full block cursor-pointer hover:bg-white dark:hover:bg-gray-900 dark:bg-gray-800 hover:text-link px-3 py-2 rounded-md">
				Full Stack (6)
			</div>
			<div
				class=" w-full block cursor-pointer hover:bg-white dark:hover:bg-gray-900 dark:bg-gray-800 hover:text-link px-3 py-2 rounded-md">
				Front End (1)
			</div>
			<div
				class=" w-full block cursor-pointer hover:bg-white dark:hover:bg-gray-900 dark:bg-gray-800 hover:text-link px-3 py-2 rounded-md">
				Freelance (1)
			</div>
			<div
				class=" w-full block cursor-pointer hover:bg-white dark:hover:bg-gray-900 dark:bg-gray-800 hover:text-link px-3 py-2 rounded-md">
				New Stack
				Project (1)</div>
		</div>
	</div>
</div>
</div>

Related Examples

Dropdown select on hover
this example does not uses javascript

Alok

3 years ago

31.3k
Search bar with filter options

Piet Vriend

3 years ago

26.3k
Dropdown menu without using javascript
Open the dropdown menu on hover

Asher Wilde

3 years ago

20.3k
Select input

Sophia Baker

3 years ago

15.1k
Onhover Dropdown
Open dropdown on hover

Akshay

4 years ago

19.1k
Nested dropdown
Nested dropdown without using javascript. It uses details and summary HTML tags for interactivity.

Emrys11

3 years ago

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

Prajwal Hallale

3 years ago

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

Thomas Taylor

2 years ago

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

Maxim

1 year ago

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

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.7k
User List
List of users

Marcos Vinicios Nussemeyer

1 year ago

1.9k