Home
Abdul Baset Bappy
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use

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 CSS v3. It is responsive. It supports dark mode.

Header Navigations Navbar

Author Abdul Baset Bappy

1.3k

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