Button Dropdown

Drop down button with only tailwind css using focus

This tailwind example is contributed by Shivam Vishwakarma, on 09-Nov-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Button Dropdown Button Group Menu

Author Shivam Vishwakarma

Tailwind v3.4 2.6k 7

Fork Fullscreen

<div class="relative">
  
  <button class="peer relative z-10 block p-2 transition-colors duration-300 transform rounded-lg focus:outline-none border-2 border-blue-500">
    <svg class="w-6 h-6 text-blue-500 rotate-90" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
    </svg>
  </button>

<div
    class="hidden peer-focus:block absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800 border">
    <a href="#"
      class="block px-4 py-2 text-sm text-gray-800 transition-colors duration-300 transform border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700">small
      <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
    <a href="#"
      class="block px-4 py-2 text-sm text-gray-800 transition-colors duration-300 transform border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700">medium
      <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
    <a href="#"
      class="block px-4 py-2 text-sm text-gray-800 transition-colors duration-300 transform dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">large
      <span class="text-gray-600 dark:text-gray-400">(2400x1600)</span></a>
  </div>
</div>

Related Examples

Button Group

Prem..

4 years ago

10.5k
Buttons with Icon

_Amar_

4 years ago

16.7k
Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs

Krishna Gudpalle

4 years ago

21.1k
Previous Next Buttons
Pagination buttons

Alok

3 years ago

15.3k
Social buttons
Mono-color Social buttons change colors according to your need

Arya

3 years ago

12.4k
Button group
nice and simple buttons with a hover effect

Sophia Baker

3 years ago

8.6k
Buttons in pair

Amit Pachange

3 years ago

11.1k
Simple buttons for links

Amit Pachange

3 years ago

11.6k
Old style Button Designs

Amit Pachange

3 years ago

11k
Sharp corner button design
button with hover effect

Amit Pachange

3 years ago

13.4k
Sign in with buttons

Simon Scheffer

3 years ago

11.9k
Hamburger menu button with hover effect

_Amar_

3 years ago

18.3k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.