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

Simple Navbar
Simple Tailwind Navbar

JUGENDRA GANGWAR

3 months ago

235
Header

Morris Muriuki Muthigani

1 year ago

1k
Admin panel with collapsible menus

Rajesh Maheshwari

1 year ago

6.6k
Markert shop
wellcome tothe my online shoping

Umutoniwase Yvette

1 year ago

1.1k
SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu
SaaS dashboard navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

278
Hero

Hasan AlDoy (McDoy)

1 year ago

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

Coastal UI

1 year ago

2.4k
NFT Header with Hero

Abdul Baset Bappy

1 year ago

1.9k
Tailwind Header
responsive mobile menu with a smooth transition

Anonymous

1 year ago

4.4k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Ayyamperumal S

1 year ago

3.2k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

9 months ago

637
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

AKASH GANDHAR

2 years ago

5.4k