? Navbars with Tailwind CSS

A navbar (navigation bar) is a key UI component for site navigation, usually placed at the top. Tailwind CSS makes building responsive, customizable navbars quick and easy.

Basic Navbar Example

<nav class="bg-gray-800 text-white px-6 py-4 flex justify-between items-center">  <div class="text-lg font-bold">MyLogo</div>  <ul class="hidden md:flex space-x-6">    <li><a href="#" class="hover:text-gray-300">Home</a></li>    <li><a href="#" class="hover:text-gray-300">About</a></li>    <li><a href="#" class="hover:text-gray-300">Services</a></li>    <li><a href="#" class="hover:text-gray-300">Contact</a></li>  </ul>  <button class="md:hidden focus:outline-none">    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"        d="M4 6h16M4 12h16M4 18h16"></path>    </svg>  </button></nav>

Explanation:

• bg-gray-800 text-white: dark background with white text

• px-6 py-4: padding inside navbar

• flex justify-between items-center: horizontal layout, space between logo and menu, vertically centered

• hidden md:flex: hide menu on small screens, show on medium and above

• space-x-6: horizontal space between menu items

• Hamburger menu button shown on small screens (md:hidden)

Responsive Navbar with Toggle (Basic JavaScript)

<nav class="bg-gray-800 text-white px-6 py-4 flex justify-between items-center">  <div class="text-lg font-bold">MyLogo</div>  <ul id="menu" class="hidden md:flex space-x-6">    <li><a href="#" class="hover:text-gray-300">Home</a></li>    <li><a href="#" class="hover:text-gray-300">About</a></li>    <li><a href="#" class="hover:text-gray-300">Services</a></li>    <li><a href="#" class="hover:text-gray-300">Contact</a></li>  </ul>  <button id="menu-btn" class="md:hidden focus:outline-none">    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"        d="M4 6h16M4 12h16M4 18h16"></path>    </svg>  </button></nav><script>  const menuBtn = document.getElementById('menu-btn');  const menu = document.getElementById('menu');  menuBtn.addEventListener('click', () => {    menu.classList.toggle('hidden');  });</script>

Variations

• Add sticky navbar with sticky top-0 z-50

• Change colors via bg-* and text-* classes

• Add dropdown menus using Tailwind and JavaScript

• Add search input inside navbar

• Use Flexbox or Grid for layout control

Would you like me to build a fully functional responsive navbar with dropdowns or integrated with React/Vue?