Bauhaus Météo Nav

<nav class="bg-gray-100 dark:bg-gray-900 border-b-4 border-yellow-500 dark:border-blue-700 p-4 transition-colors duration-300">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <div class="w-8 h-8 bg-blue-600 dark:bg-red-500 transform rotate-45"></div>
      <a href="#" class="text-gray-800 dark:text-gray-100 text-xl font-bold uppercase tracking-wider block">CLIMA</a>
    </div>

    <!-- Mobile Menu Button -->
    <button class="lg:hidden text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-blue-500" aria-label="Toggle navigation menu" onclick="this.nextElementSibling.classList.toggle('hidden'); this.nextElementSibling.classList.toggle('flex');">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Navigation Links Container -->
    <div class="hidden lg:flex w-full lg:w-auto mt-4 lg:mt-0 items-center justify-end flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500">
        Forecast
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500">
        Radar
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500">
        Climate
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-blue-500">
        Alerts
      </a>

      <!-- Search Bar -->
      <div class="relative">
        <input type="text" placeholder="Search city..." class="py-2 px-4 pl-10 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-blue-500 border border-gray-300 dark:border-gray-700 w-full lg:w-48 transition-colors duration-200">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>
  </div>
</nav>