Tailwind CSS dropdown style example

tailwind

Here is an example of how you might create a dropdown menu using Tailwind CSS:


<div class="relative inline-block text-left">
    <div>
    <span class="rounded-md shadow-sm">
      <button type="button"
              class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
        Action
        <svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd"/>
        </svg>
      </button>
    </span>
    </div>
    <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg">
        <div class="rounded-md bg-white shadow-xs">
            <div class="py-1">
                <a href="#"
                   class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Edit</a>
                <a href="#"
                   class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Copy</a>
                <a href="#"
                   class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Delete</a>
            </div>
        </div>
    </div>
</div>

This will create a dropdown menu with three options: “Edit”, “Copy”, and “Delete”. The button element serves as the trigger for the dropdown, and the div element below it contains the dropdown menu.

The relative inline-block and origin-top-right absolute classes are used to position the dropdown menu relative to the trigger. The rounded-md shadow-sm and rounded-md shadow-xs classes add rounded corners and drop shadows to the trigger and dropdown menu, respectively. The w-56 class sets the width of the dropdown menu to 56 pixels.

To handle the toggling behavior of the dropdown menu, you will need to use JavaScript. You can use event listeners to show and hide the dropdown menu when the trigger is clicked. You may also want to add additional styles and functionality, such as a way to close