Navbar

Building a Navigation Bar

A typical navbar has:

• Dark/colored background
• Brand name on the left
• Nav links on the right (or centered)
• Hover effects on links
• A call-to-action button

<nav class="bg-gray-900 text-white px-6 py-4">
  <div class="max-w-6xl mx-auto flex items-center justify-between">
    <div class="text-xl font-bold">Brand</div>
    <ul class="flex gap-6">
      <li><a href="#" class="hover:text-blue-400 transition-colors">Home</a></li>
      <li><a href="#" class="hover:text-blue-400 transition-colors">About</a></li>
    </ul>
  </div>
</nav>

Key patterns:

• flex items-center justify-between — space brand and links
• max-w-6xl mx-auto — constrain and center content
• hover:text-blue-400 transition-colors — smooth hover effect

Your Task

Build a full navbar with a brand name, at least 3 navigation links with hover effects, and a sign-in button.