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

11.6k

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

1 year ago

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

Author:
Asher Wilde

1 year ago

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

Author:
Prajwal Hallale

1 year ago

16.3k
Select input

Author:
Sophia Baker

1 year ago

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

Author:
Emrys11

1 year ago

8.6k
Search bar with icon

Author:
Steven Kuhn

1 year ago

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

Author:
Prajwal Hallale

1 year ago

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

Author:
Samuel Dawson

1 year ago

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

Author:
Prajwal Hallale

1 year ago

14.1k
File upload with icon

Author:
Fagundo67

1 year ago

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

Author:
Shariar Hasan

3 months ago

1.8k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

1 year ago

18.9k
Simple range slider

Author:
Nour Haider

11 months ago

11.6k
Range Slider

Author:
Alok

1 year ago

11.4k
File upload form

Author:
Lukas Müller

1 year ago

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

1 year ago

38k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

1 year ago

10.3k
Yes / No radio input with reset button

Author:
Kris Showen

1 year ago

7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1200+ componenent