Responsive Header

Beautiful responsive header component

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

Header

Author Rajesh Maheshwari

Tailwind v3.4 2.7k 4

Fork Fullscreen

<header class="bg-blue-900 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
            <div class="flex items-center justify-between">
                
                <div class="flex-shrink-0">
                    <a href="#" class="text-2xl font-bold">Tailwind </a>
                </div>

<nav class="hidden md:flex space-x-10 text-lg">
                    <a href="#" class="hover:text-gray-300 transition-all">Home</a>
                    <a href="#services" class="hover:text-gray-300 transition-all">Services</a>
                    <a href="#about" class="hover:text-gray-300 transition-all">About Us</a>
                    <a href="#contact" class="hover:text-gray-300 transition-all">Contact</a>
                </nav>

<div class="hidden md:block">
                    <a href="#contact" class="bg-yellow-500 hover:bg-yellow-400 text-black py-2 px-6 rounded-full text-lg transition-all">
                        Get in Touch
                    </a>
                </div>

<div class="md:hidden flex items-center">
                    <button id="menu-button" class="text-white focus:outline-none">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>

<div id="mobile-menu" class="md:hidden mt-5 hidden space-y-4">
                <a href="#" class="block text-lg hover:text-gray-300 transition-all">Home</a>
                <a href="#services" class="block text-lg hover:text-gray-300 transition-all">Services</a>
                <a href="#about" class="block text-lg hover:text-gray-300 transition-all">About Us</a>
                <a href="#contact" class="block text-lg hover:text-gray-300 transition-all">Contact</a>
            </div>
        </div>
    </header>

menuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
    </script>

Related Examples

Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA
A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

JUGENDRA GANGWAR

3 months ago

257
sticky headings
sticky headings

Anonymous

2 years ago

6.6k
yvette
vibes kbx

Umutoniwase Yvette

1 year ago

1.2k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Rathanak Phan

1 year ago

2.3k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
card section neon
card section neon

Omer fils ELENGA

7 months ago

1.3k
Artisan Coffee Crafted with Care
Coffee is one of the world's most beloved beverages, enjoyed by millions daily. Here's an in-depth look at everything coffee-related.

matoleo chance

1 year ago

1.4k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.5k
Section Heading
A gorgeous section heading with a smooth blur element.

Coastal UI

1 year ago

2.3k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
Responsive Navbar with search profile options

Rajesh Maheshwari

1 year ago

2.7k