Home
Shivam Vishwakarma
Responsive NavBar Using CSS Only

Responsive NavBar Using CSS Only

A complete responsive navbar only using tailwind css

This tailwind example is contributed by Shivam Vishwakarma, on 21-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Header Navigations Navbar

Author Shivam Vishwakarma

206

Fork Fullscreen

<header class="p-4 shadow-lg">
      <section
        class="max-w-screen-xl mx-auto flex justify-between items-center group"
      >
        <div
          class="size-14 border rounded-full overflow-hidden border-black shadow-lg hover:rotate"
        >
          <img
            src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?semt=ais_hybrid&w=740"
          />
        </div>
        <input type="checkbox" id="nav-toggle" hidden />
        <menu
          class="flex gap-4 text-lg font-semibold fixed md:static md:flex-row md:gap-8 bg-white md:bg-transparent left-0 top-20 w-full md:w-auto shadow-lg md:shadow-none flex-col md:flex-row justify-center md:justify-start p-4 md:p-0 *:border-b md:*:border-none border-b-gray-200 md:border-b-0 transition-all duration-300 ease-in-out -translate-y-[200%] group-has-[:checked]:translate-y-0 md:translate-y-0 z-10"
        >
          <a href="/"> Home </a>
          <a href="/"> About </a>
          <a href="/"> Portfolio </a>
          <a href="/"> Contact </a>
        </menu>
        <label
          for="nav-toggle"
          class="cursor-pointer md:hidden text-2xl font-bold"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-8 h-8"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
            />
          </svg>
        </label>
        <label for="nav-toggle" class="hidden fixed group-has-[:checked]:block top-0 left-0 right-0 bottom-0 bg-black/10 z-0"></label>
      </section>
    </header>

Related Examples