Home
Abid Ullah
navigation header

navigation header

responsive navigation header

This tailwind example is contributed by Abid Ullah, on 16-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Header Navigations Other

Author Abid Ullah

1.6k

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
  
  <div class="border shadow-teal-300 shadow-md max-w-2xl p-6 rounded-lg dark:bg-gray-700 dark:text-gray-300">
   <div class="w-full max-w-screen-xl px-10 mx-auto">
            <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium ">

<li>
                    <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 hover:bg-transparent md:border-0 pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 font-medium flex items-center justify-between w-full md:w-auto dark:text-white">
                        All Categories
                        <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                    <div id="dropdownNavbar" class="hidden bg-white text-base z-10 list-none divide-y divide-gray-100 rounded shadow my-4 w-44 dark:text-white">
                        <ul class="py-1 dark:text-white" aria-labelledby="dropdownLargeButton">
                            <li>
                                <a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2 dark:text-white">Mobiles</a>
                            </li>
                            <li>
                                <a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2 dark:text-white">Laptops & PCs</a>
                            </li>
                            <li>
                                <a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2 dark:text-white">Cameras</a>
                            </li>
                        </ul>

</div>
                </li>
                <li>
                    <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 dark:text-white dark:hover:text-gray-700 dark:md:hover:text-blue-700">
                        Mobile Phones
                    </a>
                </li>
                <li>
                    <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 dark:text-white dark:hover:text-gray-700 dark:md:hover:text-blue-700">
                        Laptop & PC
                    </a>
                </li>
                <li>
                    <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 dark:text-white dark:hover:text-gray-700 dark:md:hover:text-blue-700">
                        Cameras
                    </a>
                </li>
            </ul>
        </div>
  </div>
</div>

Related Examples

admin panel

Author:
Anonymous

11 months ago

1.8k
Services

Author:
Samuel Abera

3 months ago

1.1k
Sidebar with only icons

Author:
Rajesh Maheshwari

1 month ago

416
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

11.3k
invoice 02
product invoice

Author:
Tanvir Hasan Bappy (Tanvir)

2 days ago

15
Navbar compoent

Author:
Amit Pachange

2 years ago

14.6k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

16.5k
Image Gallery with Alpine.Js

Author:
Maxim

3 months ago

200
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

Author:
Samuel Abera

1 year ago

3.2k
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.2k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

2 months ago

621
Responsive Multi-Step Registration
Responsive Multi-Step Registration

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

996

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components