Composant Composants de navigation
Un composant de navigation réactif avec des couleurs vives et des micro-interactions, conçu pour un portefeuille.
HTML Code
<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-white text-2xl font-bold transform hover:scale-105 transition-transform duration-300">My Portfolio</a>
<ul class="flex space-x-6">
<li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
Home
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
</a></li>
<li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
Work
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
</a></li>
<li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
About
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
</a></li>
<li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
Contact
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
</a></li>
</ul>
</div>
</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.
Néon Glow Gouvernement Navigation
Un composant de navigation réactif pour les services gouvernementaux/publics avec une lueur néon, une palette de couleurs douces et une prise en charge du mode sombre. Présente des éléments lumineux et lumineux avec des effets d’éclairage vibrants.
Navigation skeuomorphe
Un composant de navigation simple et réactif avec un design skeuomorphique, une palette de couleurs analogue adaptée aux applications de médias sociaux, avec prise en charge du thème sombre.