Home
Akshay
Onhover Dropdown

Onhover Dropdown

Open dropdown on hover

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

Input Dropdown

Author Akshay

17.4k

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

Author:
Alok

2 years ago

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

Author:
Asher Wilde

2 years ago

18.9k
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.8k
Select input

Author:
Sophia Baker

2 years ago

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

Author:
Emrys11

2 years ago

13.9k
Search bar with icon

Author:
Steven Kuhn

2 years ago

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

Author:
Prajwal Hallale

2 years ago

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

Author:
Samuel Dawson

2 years ago

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

Author:
Prajwal Hallale

3 years ago

16.7k
File upload with icon

Author:
Fagundo67

2 years ago

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

Author:
Shariar Hasan

1 year ago

5.3k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

39.8k
Simple range slider

Author:
Nour Haider

2 years ago

14.9k
Range Slider

Author:
Alok

2 years ago

13.6k
File upload form

Author:
Lukas Müller

2 years ago

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

Author:
Bunny

2 years ago

49k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

2 years ago

14.4k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components