Bauhaus Weather Nav
Un componente de navegación receptivo para una aplicación meteorológica y climática, con un diseño inspirado en la Bauhaus con formas geométricas, colores apagados y compatibilidad total con el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de navegación de redes sociales
Un componente de navegación responsivo diseñado para interfaces de redes sociales, con una estética de Material Design que utiliza un tema oscuro con Tailwind CSS.
Componente de navegación
Un componente de navegación responsivo diseñado para la interfaz de usuario del modo oscuro, con enlaces, menús desplegables y un logotipo, todo con estilo Tailwind CSS.
Navegación de comercio electrónico brutalista
Un componente de navegación de estilo brutalista para el comercio electrónico, con un esquema de color en escala de grises, diseño complejo, capacidad de respuesta y compatibilidad con el modo oscuro, creado con Tailwind CSS.