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

2.1k

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

Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

1 year ago

2.5k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.6k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.9k
Admin portal landing page

Author:
Srreyashi DeyChakii

1 year ago

4.2k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

1 year ago

3.7k
yvette
vibes kbx

Author:
Umutoniwase Yvette

9 months ago

736
Home
html , css

Author:
Hacker Development

9 months ago

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

Author:
Coastal UI

1 year ago

1.9k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

286
Avant & Après
Avant & Après

Author:
Omer fils ELENGA

3 months ago

398
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

621
NFT Header with Hero

Author:
Abdul Baset Bappy

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components