Responsive Navbar with TailwindCSS

responsive navbar built with TailwindCSS, perfect for mobile and desktop views

This tailwind example is contributed by Rathanak Phan, on 13-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Navigations Dropdown Navbar

Author Rathanak Phan

Tailwind v3.4 2.2k 3

Fork Fullscreen

<nav class="bg-gray-500 fixed top-0 left-0 w-full z-50">
  <div class="flex justify-between items-center h-16 md:h-20 lg:h-24 px-5 sm:px-10 lg:px-20 text-white">
    
    <a href="#" class="text-2xl lg:text-3xl flex items-center gap-2 font-serif">
      <i class="fa-solid fa-shop text-green-700"></i>
      <span>LoGo</span>
    </a>

<ul class="hidden md:flex gap-8 text-lg">
      <li><a href="/#" class="hover:underline">Home</a></li>
      <li><a href="/shop" class="hover:underline">Shop</a></li>
      <li><a href="/about" class="hover:underline">About</a></li>
      <li><a href="/contact" class="hover:underline">Contact</a></li>
    </ul>

<div class="flex items-center gap-5">

<button class="hidden md:flex border-2 rounded-md bg-blue-500 text-lg px-2">
        Get started
      </button>
      <button class="md:hidden text-2xl" onclick="toggleMenu()">
        <i class="fa-solid fa-bars">=</i>
      </button>
    </div>
  </div>

<div id="mobileMenu" class="md:hidden bg-gray-800 text-white p-5 space-y-3">
    <a href="/" class="block hover:bg-gray-700 py-2 px-4 rounded">Home</a>
    <a href="/shop" class="block hover:bg-gray-700 py-2 px-4 rounded">Shop</a>
    <a href="/about" class="block hover:bg-gray-700 py-2 px-4 rounded">About</a>
    <a href="/contact" class="block hover:bg-gray-700 py-2 px-4 rounded">Contact</a>
  </div>
</nav>