RétroNav

Un composant de navigation simple, réactif et compatible avec le mode sombre avec un design rétro/vintage, une palette de couleurs vives et des éléments minimaux, adapté aux sites Web de commerce électronique.

Aperçu

HTML Code

<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white text-2xl font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Products</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

Composants associés

Navigation dans le tableau de bord (Material Design)

Composant de navigation de tableau de bord de conception matérielle avec schéma de couleurs triadique et prise en charge du mode sombre.

Ouvrir

Composant de navigation rétro vintage

Un composant de navigation réactif conçu avec une esthétique rétro/vintage inspirée des styles des années 80/90, avec une palette de couleurs pastel. Convient aux interfaces de médias sociaux, y compris la prise en charge du mode sombre.

Ouvrir

Composant de navigation

Un composant de navigation d’inspiration rétro/vintage conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir