Navbar Colors

                    <!-- Default (Light) Navbar -->
<nav class="bg-white shadow-sm px-4 py-3 mb-8">
  <div class="max-w-6xl mx-auto flex items-center justify-between">
    <a href="#" class="text-xl font-semibold text-gray-800">
      Light Navbar
    </a>
    <div class="flex items-center space-x-4">
      <a href="#" class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">Home</a>
      <a href="#" class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">About</a>
      <a href="#" class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">Contact</a>
    </div>
  </div>
</nav>

<!-- Neutral (Gray) Navbar -->
<nav class="bg-gray-800 shadow-sm px-4 py-3 mb-8">
  <div class="max-w-6xl mx-auto flex items-center justify-between">
    <a href="#" class="text-xl font-semibold text-white">
      Dark Navbar
    </a>
    <div class="flex items-center space-x-4">
      <a href="#" class="px-3 py-2 text-gray-200 hover:text-white hover:bg-gray-700 rounded-md">Home</a>
      <a href="#" class="px-3 py-2 text-gray-200 hover:text-white hover:bg-gray-700 rounded-md">About</a>
      <a href="#" class="px-3 py-2 text-gray-200 hover:text-white hover:bg-gray-700 rounded-md">Contact</a>
    </div>
  </div>
</nav>

<!-- Primary (Blue) Navbar -->
<nav class="bg-blue-600 shadow-sm px-4 py-3 mb-8">
  <div class="max-w-6xl mx-auto flex items-center justify-between">
    <a href="#" class="text-xl font-semibold text-white">
      Primary Navbar
    </a>
    <div class="flex items-center space-x-4">
      <a href="#" class="px-3 py-2 text-blue-100 hover:text-white hover:bg-blue-700 rounded-md">Home</a>
      <a href="#" class="px-3 py-2 text-blue-100 hover:text-white hover:bg-blue-700 rounded-md">About</a>
      <a href="#" class="px-3 py-2 text-blue-100 hover:text-white hover:bg-blue-700 rounded-md">Contact</a>
    </div>
  </div>
</nav>

<!-- Success (Green) Navbar -->
<nav class="bg-green-600 shadow-sm px-4 py-3 mb-8">
  <div class="max-w-6xl mx-auto flex items-center justify-between">
    <a href="#" class="text-xl font-semibold text-white">
      Success Navbar
    </a>
    <div class="flex items-center space-x-4">
      <a href="#" class="px-3 py-2 text-green-100 hover:text-white hover:bg-green-700 rounded-md">Home</a>
      <a href="#" class="px-3 py-2 text-green-100 hover:text-white hover:bg-green-700 rounded-md">About</a>
      <a href="#" class="px-3 py-2 text-green-100 hover:text-white hover:bg-green-700 rounded-md">Contact</a>
    </div>
  </div>
</nav>

<!-- Warning (Amber) Navbar -->
<nav class="bg-amber-500 shadow-sm px-4 py-3">
  <div class="max-w-6xl mx-auto flex items-center justify-between">
    <a href="#" class="text-xl font-semibold text-white">
      Warning Navbar
    </a>
    <div class="flex items-center space-x-4">
      <a href="#" class="px-3 py-2 text-amber-100 hover:text-white hover:bg-amber-600 rounded-md">Home</a>
      <a href="#" class="px-3 py-2 text-amber-100 hover:text-white hover:bg-amber-600 rounded-md">About</a>
      <a href="#" class="px-3 py-2 text-amber-100 hover:text-white hover:bg-amber-600 rounded-md">Contact</a>
    </div>
  </div>
</nav>