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!

This tailwind example is contributed by Abdul Baset Bappy, on 25-Mar-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Header Navigations Navbar

Author Abdul Baset Bappy

Tailwind v3.4 2.7k 5

Fork Fullscreen

<div class="flex flex-1 items-center justify-end md:justify-between">
            <nav aria-label="Global" class="hidden md:block">
                <ul class="flex items-center gap-6 text-sm">
                    <li>
                        <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                            About
                        </a>
                    </li>

<li>
                        <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                            Careers
                        </a>
                    </li>

<li>
                        <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                            History
                        </a>
                    </li>

<li>
                        <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                            Services
                        </a>
                    </li>

<li>
                        <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                            Projects
                        </a>
                    </li>

<div class="flex items-center gap-4">
                <div class="sm:flex sm:gap-4">
                    <a class="block rounded-md bg-rose-600 px-4 py-1.5 sm:px-5 sm:py-2.5 text-sm font-medium text-white transition hover:bg-rose-700"
                        href="#">
                        Login
                    </a>

<a class="hidden rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-rose-600 transition hover:text-rose-600/75 sm:block"
                        href="#">
                        Register
                    </a>
                </div>

<button
                            class="block rounded-sm bg-transparent p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden"
                        >
                            <span class="sr-only">Toggle menu</span>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="size-6"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M4 6h16M4 12h16M4 18h16"
                                />
                            </svg>
                        </button>
            </div>
        </div>
    </div>
</header>

<li>
                        <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                            Careers
                        </a>
                    </li>

<li>
                        <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                            History
                        </a>
                    </li>

<li>
                        <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                            Services
                        </a>
                    </li>

<li>
                        <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                            Projects
                        </a>
                    </li>

<div class="hidden md:block">
                <nav aria-label="Global">
                    <ul class="flex items-center gap-6 text-sm">
                        <li>
                            <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                                About
                            </a>
                        </li>

<li>
                            <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                                Careers
                            </a>
                        </li>

<li>
                            <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                                History
                            </a>
                        </li>

<li>
                            <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                                Services
                            </a>
                        </li>

<li>
                            <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                                Projects
                            </a>
                        </li>

<div class="flex items-center gap-4">
                <div class="sm:flex sm:gap-4">
                    <a class="rounded-md bg-rose-600 px-4 py-1.5 sm:px-5 sm:py-2.5 text-sm font-medium text-white shadow-sm"
                        href="#">
                        Login
                    </a>

<div class="hidden sm:flex">
                        <a class="rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-rose-600" href="#">
                            Register
                        </a>
                    </div>
                </div>

<div class="md:flex md:items-center md:gap-12">
                <nav aria-label="Global" class="hidden md:block">
                    <ul class="flex items-center gap-6 text-sm">
                        <li>
                            <a class="text-gray-500 transition hover:text-gray-500/75" href="#">
                                About
                            </a>
                        </li>

<div class="flex items-center gap-4">
                    <div class="sm:flex sm:gap-4">
                        <a class="rounded-md bg-rose-600 px-4 py-1.5 sm:px-5 sm:py-2.5 text-sm font-medium text-white shadow-sm"
                            href="#">
                            Login
                        </a>

<div class="hidden sm:flex">
                            <a class="rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-rose-600" href="#">
                                Register
                            </a>
                        </div>
                    </div>

<div class="flex items-center gap-4">
                    <div class="sm:flex sm:gap-4">
                        <a class="rounded-md bg-rose-600 px-4 py-1.5 sm:px-5 sm:py-2.5 text-sm font-medium text-white shadow-sm"
                            href="#">
                            Login
                        </a>

<div class="hidden sm:flex">
                            <a class="rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-rose-600" href="#">
                                Register
                            </a>
                        </div>
                    </div>

Related Examples

Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.8k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.6k
Animated navigation with Tailwind CSS and Apinejs

Michael Andreuzza

2 years ago

5.8k
New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

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

zobaidul kaziex

2 years ago

4.3k
Tailwind css navigation header
Tailwind css navigation header

Abid Ullah

2 years ago

3.3k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Coastal UI

1 year ago

4k
Tailwind Header
responsive mobile menu with a smooth transition

Anonymous

1 year ago

4.4k