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.6k

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 select on hover
this example does not uses javascript

Author:
Thomas Taylor

1 year ago

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

Author:
Shariar Hasan

1 year ago

6.2k
Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

1 year ago

2k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

3 years ago

18.3k
User List
List of users

Author:
Marcos Vinicios Nussemeyer

9 months ago

1.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:
Maxim

1 year ago

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

Author:
Emrys11

2 years ago

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

Author:
Nick Girga

8 months ago

442
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

10 months ago

1.3k
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

4 months ago

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

Author:
Dmitry

2 years ago

5.9k
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

10 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components