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
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.
Composant Composants de navigation
Il s’agit d’un composant de navigation complexe et réactif pour les tableaux de bord, doté de micro-interactions et d’un schéma de couleurs analogue, avec prise en charge du mode sombre. Utilise Tailwind CSS pour le style et inclut des éléments interactifs sans dépendre de JavaScript.
Composants de navigation
Un composant de navigation réactif suivant les principes de Material Design avec une palette de couleurs triadique, destiné aux interfaces de médias sociaux, avec prise en charge du mode sombre.