Home
Rajesh Maheshwari
Responsive Header

Responsive Header

Beautiful responsive header component

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

Header

Author Rajesh Maheshwari

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

Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

576
Job Platfoam
If you need a Job You will Have to Apply for it

Author:
soft mind

7 months ago

895
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

5k
hero template

Author:
Raul antonio de la cruz hernandez

2 weeks ago

47
Header

Author:
Morris Muriuki Muthigani

5 months ago

512
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

7 months ago

1.2k
Coffee
custom

Author:
Rebecca IRANKUNDA

7 months ago

548
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

7 months ago

722
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.8k
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

9 months ago

2.1k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

4 months ago

485

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components