Onhover Dropdown

Open dropdown on hover

This tailwind example is contributed by Akshay, on 02-Aug-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Input Dropdown

Author Akshay

Tailwind v3.4 19.1k 8

Fork Fullscreen

<div class="dropdown inline-block relative">
    <button class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-semibold py-2 px-4 rounded inline-flex items-center">
      <span class="mr-1">Dropdown</span>
      <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
    </button>
    <ul class="dropdown-menu absolute hidden text-gray-700 dark:text-gray-300 pt-1">
      <li class=""><a class="rounded-t bg-gray-200 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
          href="#">One</a></li>
      <li class=""><a class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap" href="#">Two</a></li>
      <li class=""><a class="rounded-b bg-gray-200 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap" href="#">Three
          is the magic number</a></li>
    </ul>
  </div>

</div>

Related Examples

Dropdown select on hover
this example does not uses javascript

Alok

3 years ago

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

Asher Wilde

3 years ago

20.3k
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
Select input

Sophia Baker

3 years ago

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

Emrys11

3 years ago

15.7k
Search bar with icon

Steven Kuhn

4 years ago

15.8k
Image input with preview
Show you a preview of the selected image.

Prajwal Hallale

3 years ago

27.9k
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Samuel Dawson

3 years ago

18.6k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Prajwal Hallale

4 years ago

17.1k
File upload with icon

Fagundo67

3 years ago

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

Shariar Hasan

2 years ago

7k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.7k
Simple range slider

Nour Haider

3 years ago

16.4k
Range Slider

Alok

3 years ago

14.6k
File upload form

Lukas Müller

3 years ago

14.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Profile Form
Profile form for taking user inputs

TailwindFlex

4 years ago

15.4k
Yes / No radio input with reset button

Kris Showen

3 years ago

11k