Composants Composants de navigation Cyberpunk_Food_Nav

Cyberpunk_Food_Nav

Un composant de navigation simple et réactif sur le thème du cyberpunk pour les sites Web de restauration, avec des arrière-plans sombres, des accents néon et une prise en charge du mode sombre.

Aperçu

HTML Code

<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>

Composants associés

Navigation CRM minimaliste

Un composant de navigation simple et minimaliste pour CRM/Business Tools, doté d’une palette de couleurs violet/violet et d’une réactivité totale avec prise en charge du mode sombre.

Ouvrir

Navigation brutaliste sur les réseaux sociaux

Un composant de navigation réactif conçu dans un style brutaliste pour les applications de médias sociaux, utilisant une palette de couleurs complémentaires et des éléments minimaux.

Ouvrir

RetroPortfolioNavigation

Composant de navigation rétro/vintage pour portefeuille avec prise en charge de la palette de couleurs pastel, réactive et du mode sombre.

Ouvrir