Building a Responsive Navbar

A navbar is the most common Flexbox use case. The pattern: container with flex justify-between items-center, logo left, links right.

Desktop navbar

<header class="bg-white border-b border-gray-200">
  <nav class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
    <a href="/" class="text-xl font-bold text-gray-900">Logo</a>
    <ul class="flex gap-8 text-sm font-medium text-gray-600">
      <li><a href="#" class="hover:text-gray-900 transition-colors">Products</a></li>
      <li><a href="#" class="hover:text-gray-900 transition-colors">Pricing</a></li>
    </ul>
    <div class="flex gap-3">
      <a href="#" class="text-sm font-medium text-gray-700">Log in</a>
      <a href="#" class="bg-blue-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-blue-700">Sign up</a>
    </div>
  </nav>
</header>

Mobile and desktop visibility

<!-- Nav links: hidden mobile, flex on desktop -->
<ul class="hidden md:flex gap-8">...</ul>

<!-- Hamburger: visible mobile only -->
<button class="md:hidden">Menu</button>

The hidden md:flex pattern is fundamental in Tailwind responsive design. The element is hidden at mobile, displayed as flex from the md breakpoint upward. This replaces media query CSS blocks entirely.