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

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

Dropdown menu without using javascript
Open the dropdown menu on hover

Author:
Asher Wilde

1 year ago

18.4k
Dropdown select on hover
this example does not uses javascript

Author:
Alok

2 years ago

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

Author:
Rathanak Phan

3 months ago

875
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

1 month ago

444
User List
List of users

Author:
Marcos Vinicios Nussemeyer

2 weeks ago

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

Author:
Dmitry

1 year ago

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

Author:
Emrys11

2 years ago

13.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:
Anonymous

1 month ago

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

Author:
Shariar Hasan

1 year ago

4.9k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

2 years ago

19.6k
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:
Maxim

4 months ago

2.7k
Dropdown select on hover
this example does not uses javascript

Author:
Thomas Taylor

10 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components