Home
Shariar Hasan
Drop Down

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 CSS v3. It is responsive. It supports dark mode.

Select Dropdown

Author Shariar Hasan

5.2k

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

Author:
Alok

2 years ago

27.9k
Search bar with filter options

Author:
Piet Vriend

2 years ago

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

Author:
Asher Wilde

2 years ago

18.8k
Select input

Author:
Sophia Baker

2 years ago

13.3k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

2 years ago

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

Author:
Emrys11

2 years ago

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

Author:
Prajwal Hallale

2 years ago

19.7k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

1 month ago

257
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

3 months ago

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

Author:
Nick Girga

1 month ago

117
register
helps us to be learn easy

Author:
Nishimwe Jeanine

1 month ago

9
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

3 months ago

676

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components