Home
Rajesh Maheshwari
Responsive Header

Responsive Header

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Header Navbar

Author Rajesh Maheshwari

1.8k

Fork Fullscreen

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

<body>
    
    <nav class="bg-white shadow-lg fixed w-full z-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="#" class="flex-shrink-0 flex items-center">
                        <img class="h-8 w-auto" src="https://tailwindflex.com/images/logo.svg" alt="Logo">
                        <span class="ml-2 text-xl font-bold text-gray-800">Company</span>
                    </a>
                    <div class="hidden md:ml-6 md:flex md:space-x-8">
                        <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            Home
                        </a>
                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            About
                        </a>
                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            Services
                        </a>
                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            Contact
                        </a>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="hidden md:ml-4 md:flex md:items-center">
                        <button class="bg-indigo-600 px-4 py-2 rounded-md text-white text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            Sign Up
                        </button>
                    </div>
                    <div class="flex items-center md:hidden">
                        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
                            <span class="sr-only">Open main menu</span>
                            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="pt-2 pb-3 space-y-1">
                <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                    Home
                </a>
                <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                    About
                </a>
                <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                    Services
                </a>
                <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                    Contact
                </a>
            </div>
            <div class="pt-4 pb-3 border-t border-gray-200">
                <div class="flex items-center px-4">
                    <button class="w-full bg-indigo-600 px-4 py-2 rounded-md text-white text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Sign Up
                    </button>
                </div>
            </div>
        </div>
    </nav>

<div class="pt-16">
        <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <div class="px-4 py-6 sm:px-0">
                <div class="border-4 border-dashed border-gray-200 rounded-lg h-96 flex items-center justify-center">
                    <p class="text-gray-500 text-xl">Page Content Goes Here</p>
                </div>
            </div>
        </div>
    </div>

Related Examples

Responsive Bottom Nav
Fully Responsive bottom navigation bar with both light and dark modes

Author:
AKASH GANDHAR

1 year ago

3.6k
modern portifolio
by salvator

Author:
Baraka Salvator

9 months ago

852
page heaading stacked
yeah booy, oh booy, o buy

Author:
Anonymous

2 years ago

10.3k
vav bar
html , css

Author:
Hacker Development

10 months ago

1.2k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.6k
Dark mode sidenav with collapsible menu

Author:
Rajesh Maheshwari

1 year ago

1.4k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

1 year ago

5.5k
htmlbasics

Author:
Anonymous

8 months ago

942
joker
joker cyber punk

Author:
Baraka Salvator

8 months ago

1.2k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

3.2k
Movies are a popular form
Movies are a popular form of entertainment that combine storytelling, visuals, and sound to create immersive experiences. They can be fictional or based on real events, spanning genres like action, comedy, drama, horror, sci-fi, romance, and more. Here’s a quick overview:

Author:
nii fanny

9 months ago

764
Navbar
This navbar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background and accents 3. Dark mode support with a toggle button 4. Beautiful animations and effects: 1. Fade-in animation for menu items with staggered delays 2. Hover effects on menu items with underline animation 3. Smooth color transitions 4. Mobile menu slide-down animation 5. SVG icons for the dark mode toggle and mobile menu button 6. "Sign Up" call-to-action button 7. Mobile-friendly dropdown menu 8. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The navbar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with color changes and underline animations - The dark mode toggle changes its icon based on the current mode - The mobile menu slides down with a smooth animation when toggled - Desktop menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional navbar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

1 year ago

4.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components