How to show a dropdown over a modal using tailwind css?

Member

by dedrick , in category: HTML & CSS , 10 months ago

How to show a dropdown over a modal using tailwind css?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by cali_green , 10 months ago

@dedrick 

To show a dropdown over a modal using Tailwind CSS, you can adjust the z-index of the dropdown so that it appears above the modal. Here is an example of how you can achieve this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!-- Modal -->
<div class="fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center">
    <!-- Content inside the modal -->
</div>

<!-- Dropdown -->
<div class="absolute top-0 right-0 mt-12">
    <div class="relative">
        <button class="px-4 py-2 bg-gray-800 text-white">Dropdown</button>
        <div class="absolute right-0 mt-1 w-32 bg-white border border-gray-200 z-10">
            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Option 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Option 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Option 3</a>
        </div>
    </div>
</div>


In this example, the modal has a z-index of 50 by default, so to make the dropdown appear above the modal, we have assigned a z-index of 10 to the dropdown. This ensures that the dropdown is displayed over the modal. You can adjust the z-index value of the dropdown as needed to achieve the desired result.

Related Threads:

How to make dropdown menu in tailwind css?
How to create a dropdown nav with laravel and tailwind css?
How to show alert notification in tailwind css?
How to minify css with webpack when using tailwind?
How to display the image using tailwind css?
How to change image on hover using tailwind css?