Componentes Navegación pegajosa Componente de navegación pegajosa

Componente de navegación pegajosa

Barra de navegación fija minimalista y receptiva para un sitio web meteorológico/climático, con colores neutros fríos, compatibilidad con modo oscuro y elementos interactivos. Diseñado para complejidad media con enlaces funcionales y una barra de búsqueda.

Vista previa

Código HTML

<header class="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-900 transition-colors duration-300 ease-in-out">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap gap-4">
    <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 whitespace-nowrap tracking-tight transition-colors duration-300 ease-in-out">
      Weather<span class="text-blue-600 dark:text-blue-400">Sphere</span>
    </a>

    <div class="flex items-center gap-4 order-3 md:order-none">
      <div class="relative flex items-center">
        <input type="search" placeholder="Search city..." class="py-2 pl-10 pr-3 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 ease-in-out w-full max-w-xs md:max-w-none">
        <svg class="absolute left-3 text-gray-500 dark:text-gray-400 w-5 h-5" 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>
      <button type="button" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ease-in-out">
        <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="M12 3v1m0 16v1m9-9h1M3 12h1m15.325-7.757l-.707-.707M4.343 19.343l-.707-.707m13.414 0l.707-.707M4.343 4.343l-.707-.707"></path>
        </svg>
      </button>
    </div>

    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="cursor-pointer md:hidden text-gray-600 dark:text-gray-300 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300 ease-in-out order-2">
      <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>
    </label>

    <div class="hidden peer-checked:block md:flex flex-col md:flex-row md:items-center gap-x-6 gap-y-2 w-full md:w-auto mt-4 md:mt-0 pb-2 md:pb-0 border-t md:border-t-0 border-gray-200 dark:border-gray-700 order-last md:order-none transition-all duration-300 ease-in-out" id="navbar-links">
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Dashboard
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Forecast
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Climate Data
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Maps
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        About
      </a>
    </div>
  </nav>
</header>

Componentes relacionados

Componente de navegación pegajoso - Pastel neumórfico

Un componente de navegación complejo y pegajoso con un estilo de diseño de neumorfismo y un esquema de color pastel, adecuado para documentación o sitios wiki. Cuenta con elementos de navegación anidados, una barra de búsqueda y compatibilidad con el modo oscuro, todo implementado con HTML y Tailwind CSS para una capacidad de respuesta completa.

Abrir