Composants Composants d’amélioration de la navigation Composant Composants d’amélioration de la navigation

Composant Composants d’amélioration de la navigation

Un composant de navigation réactif avec prise en charge du mode sombre pour les sites Web de commerce électronique. Il présente une palette de couleurs triadique avec un fond sombre pour réduire la fatigue oculaire.

Aperçu

HTML Code

<nav class="bg-gray-900 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-white text-lg font-semibold">E-Shop</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Products</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Categories</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-800 text-white px-3 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      <button class="bg-blue-600 dark:bg-green-600 text-white px-4 py-1 rounded-md">Cart</button>
    </div>
  </div>
</nav>

Composants associés

Composant d’amélioration de la navigation

Un composant de navigation réactif conçu dans le style Material Design à l’aide de Tailwind CSS, avec prise en charge du thème sombre et des effets réactifs.

Ouvrir

Cyberpunk_Portfolio_Navigation

Un composant de navigation complexe et réactif sur le thème du cyberpunk pour un portfolio, avec une esthétique futuriste violet néon, des arrière-plans sombres et des éléments interactifs. Inclut la prise en charge du mode sombre.

Ouvrir

Composants d’amélioration de la navigation

Un composant d’amélioration de la navigation réactif pour un blog en mode sombre avec des couleurs vives et des fonctionnalités de complexité modérée.

Ouvrir