Home
Bernard Omuse
Dropdown

Dropdown

hover dropdown with width of max-w-7xl

This tailwind example is contributed by Bernard Omuse, on 01-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Dropdown

Author Bernard Omuse

1.3k

Fork Fullscreen

<div id="bouton" class="relative group mt-2 md:justify-between justify-end">
    <button
        class="flex items-center ml-2 md:ml-0 text-red-800 font-playfair-b font-bold uppercase hover:underline hover:text-red-800">
        Areas Of Practice
        <span class="ml-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="#CB4154" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-5 h-4 transition-transform group-hover:rotate-90">
                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
            </svg>
        </span>
    </button>
    <div
        class="mx-auto max-w-7xl absolute pl-8 pr-8 top-full bg-red-900 rounded-lg grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 opacity-0 group-hover:opacity-100 transition-opacity w-full">
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="procurement.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Procurement
                Law</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="arbitration.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Arbitration and
                ADR</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="conveyance.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Conveyance and
                Securities</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="family.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Family Law</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="constitutional.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Constitutional and Administrative Law</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="election.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Election Law and Practice</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="commercial.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Commercial and Corporate Practice</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="banking.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Banking and Finance Law</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="employment.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Employment and Labour Law</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="environment.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Environment and Land Law</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="health.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Health Law</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="interllectial.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Intellectual Property (IP)</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900 border-dotted border-b border-stone-200">
            <a href="tax.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Tax Law</a>
        </div>
        <div class="relative flex justify-between items-center py-2 hover:bg-blue-900">
            <a href="criminal.html" class="rounded-md font-medium text-xs text-white hover:shadow-md">Criminal Law</a>
        </div>
    </div>
</div>

Related Examples

Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

11 months ago

1.8k
Dropdown menu without using javascript
Open the dropdown menu on hover

Author:
Asher Wilde

2 years ago

19.4k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
SANJAY SINGH GARIYA

4 months ago

464
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Author:
Shariar Hasan

1 year ago

5.7k
Material 3 Menu [Light]
A menu that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

5 months ago

292
Nested dropdown
Nested dropdown without using javascript. It uses details and summary HTML tags for interactivity.

Author:
Emrys11

2 years ago

14.3k
Dropdown profile
Using DaisyUI Based on: https://tailwindcomponents.com/component/dropdown-7

Author:
Dmitry

1 year ago

5.8k
User List
List of users

Author:
Marcos Vinicios Nussemeyer

6 months ago

1.1k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

7 months ago

1.5k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

7 months ago

987
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

1 month ago

84
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components