Positioning the Dropdown Area in Tailwind CSS

Last Updated : 26 Sep, 2024

Positioning the dropdown area is important for maintaining the responsiveness and usability of web applications. Using Tailwind CSS allows developers to easily implement flexible and visually appealing dropdown menus. we are going to set positions for the dropdown using Tailwind CSS

These are the following approaches through which we can position the dropdown area:

Table of Content

Using Absolute Positioning
Using Flex Positioning

Using Absolute Positioning

In this approach, we are using absolute positioning to display the dropdown below the button. The parent container is set to relative, and the dropdown is positioned using the absolute class. Tailwind CSS utility classes such as mt-2 (margin-top) and w-56 (width) ensure the dropdown is styled and aligned correctly.

Example: The below example uses Absolute Positioning to Position the Dropdown Area in Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Dropdown</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-10">

    <h1 class="text-green-500 text-4xl mb-4">GeeksforGeeks</h1>
    <h3 class="text-xl text-gray-700 mb-6">Approach 1: Using Absolute Positioning</h3>

    <div class="relative inline-block">
        <button class="bg-green-500 text-white
                       px-4 py-2 rounded-md focus:outline-none peer">
            GeeksforGeeks Data
        </button>
        <div class="absolute mt-2 w-56 bg-white 
                    shadow-lg rounded-md py-2 hidden peer-focus:block">
            <a href="https://www.geeksforgeeks.org/category/programming-languages/"
                class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Programming Languages
            </a>
            <a href="https://www.geeksforgeeks.org/tutorials/" 
               class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Tutorials
            </a>
            <a href="https://practice.geeksforgeeks.org/" 
               class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Coding Competitions
            </a>
            <a href="https://www.geeksforgeeks.org/data-structures/"
                class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Data Structures
            </a>
            <a href="https://www.geeksforgeeks.org/machine-learning/"
                class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Machine Learning
            </a>
        </div>
    </div>

</body>

</html>

Output:

Using Flex Positioning

In this approach, we are using Flexbox positioning with classes from Tailwind CSS to create a vertically stacked layout for the dropdown menu. The parent container uses flex, flex-col, and items-center to center the button and dropdown, ensuring a neat and organized appearance.

Example: The below example uses Flex Positioning to Position the Dropdown Area in Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Dropdown</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-10">

    <h1 class="text-green-500 text-4xl mb-4"> 
      GeeksforGeeks</h1>
    <h3 class="text-xl text-gray-700 mb-6">Approach 2:
      Using Flex Positioning</h3>

    <div class="flex flex-col items-center">
        <button class="bg-green-500 text-white px-4 py-2 
                       rounded-md mb-2 peer focus:outline-none">
            GeeksforGeeks Data
        </button>
        <div class="w-56 bg-white shadow-lg rounded-md py-2 hidden peer-focus:block">
            <a href="https://www.geeksforgeeks.org/category/programming-languages/"
                class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Programming Languages
            </a>
            <a href="https://www.geeksforgeeks.org/tutorials/" 
               class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Tutorials
            </a>
            <a href="https://practice.geeksforgeeks.org/" 
               class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Coding Competitions
            </a>
            <a href="https://www.geeksforgeeks.org/data-structures/"
                class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Data Structures
            </a>
            <a href="https://www.geeksforgeeks.org/machine-learning/"
                class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                Machine Learning
            </a>
        </div>
    </div>

</body>

</html>

Output:

Foundation CSS Dropdown Positioning

gpancomputer

Improve

Article Tags :

Positioning the Dropdown Area in Tailwind CSS

Using Absolute Positioning

Using Flex Positioning

Similar Reads

Thank You!

What kind of Experience do you want to share?