Home
Rathanak Phan
Responsive Navbar with TailwindCSS

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

Navigations Dropdown Navbar

Author Rathanak Phan

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>

Related Examples