Componentes Navegación pegajosa Componente de navegación pegajosa

Componente de navegación pegajosa

Componente de navegación pegajosa y receptivo con modo oscuro

Vista previa

Código HTML

<nav class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">Social Site</div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
      </div>
      <div class="md:hidden">
        <button class="mobile-menu-button text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
          <svg class="h-6 w-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>
      </div>
    </div>
    <div class="mobile-menu hidden md:hidden mt-2">
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Profile</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Messages</a>
    </div>
  </div>
</nav>

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

Navegación pegajosa de comercio electrónico retro

Un componente de navegación pegajoso retro/vintage para sitios de comercio electrónico con colores vibrantes, elementos complejos, capacidad de respuesta y compatibilidad con el modo oscuro mediante Tailwind CSS.

Abrir

Componente de navegación pegajosa

Un componente de navegación pegajoso diseñado en un estilo skeuomórfico, adecuado para sitios web de comercio electrónico con un diseño responsivo y soporte de temas oscuros utilizando Tailwind CSS.

Abrir