Home
Shivam Vishwakarma
Button Dropdown

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

Button Dropdown Button Group Menu

Author Shivam Vishwakarma

Fork Fullscreen

<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