Neumorphisme Navigation

Un composant de navigation réactif simple avec le style Neumorphism pour le commerce électronique.

Aperçu

HTML Code

<nav class="p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <ul class="flex justify-center space-x-4">
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Home</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Shop</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Categories</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Cart</a></li>
  </ul>
</nav>

Composants associés

Navigation sur les réseaux sociaux

Un composant de navigation réactif sur les réseaux sociaux avec une palette de couleurs sourdes/désaturées, inspiré des principes de conception matérielle, prenant en charge les modes clair et sombre. Dispose d’une mise en page basée sur une grille et d’effets de profondeur.

Ouvrir

Navigation sociale brutaliste

Un composant de navigation simple et brutaliste pour les médias sociaux avec des couleurs complémentaires. Comprend la conception réactive et la prise en charge du mode sombre.

Ouvrir

Composante de navigation brutale

Un composant de navigation réactif conçu dans un style brutaliste, présentant une palette de couleurs monochromatiques, idéal pour un site Web de portfolio. Les caractéristiques incluent une mise en page audacieuse avec un contraste élevé, la prise en charge du mode sombre à l’aide de Tailwind CSS et des éléments interactifs tels que des listes déroulantes ou des liens de boutons.

Ouvrir