Componentes Componentes de navegación Cyberpunk_Food_Nav

Cyberpunk_Food_Nav

Un componente de navegación simple y receptivo con temática cyberpunk para sitios web de comida/restaurantes, con fondos oscuros, acentos de neón y compatibilidad con el modo oscuro.

Vista previa

Código HTML

<header class="bg-zinc-950 dark:bg-black text-lime-400 p-4 shadow-lg shadow-lime-900/30 dark:shadow-fuchsia-900/30">
  <nav class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold font-mono tracking-wider transition-colors duration-300 hover:text-lime-200 dark:hover:text-fuchsia-400">
      BYTE BITES
    </a>

    <div class="hidden md:flex space-x-6 text-lg">
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Menu</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Order</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Locations</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Contact</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button class="text-lime-400 dark:text-fuchsia-400 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:focus:ring-fuchsia-600 rounded-md p-1">
        <svg class="w-8 h-8" 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>
  </nav>
</header>

Componentes relacionados

Componentes de navegación

Un componente de navegación diseñado con un estilo brutalista, con una combinación de colores pastel para las interfaces de redes sociales, con un diseño receptivo y soporte para temas oscuros.

Abrir

Navegación gubernamental de Neon Glow

Un componente de navegación receptivo para el gobierno/servicios públicos con un brillo de neón, una combinación de colores dulces y compatibilidad con el modo oscuro. Cuenta con elementos brillantes y resplandecientes con efectos de iluminación vibrantes.

Abrir

Componente de componentes de navegación

Un componente de navegación responsivo con soporte de modo oscuro usando Tailwind CSS. Incluye un logotipo, enlaces de navegación y un botón de llamada a la acción.

Abrir