Composant de navigation
Un composant de navigation réactif conçu avec des micro-interactions et proposant des animations attrayantes basées sur les actions de l’utilisateur, prenant en charge les thèmes clairs et sombres. Le composant comprend un avatar de profil, des liens de navigation et des effets de survol.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
<h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
</div>
</nav>
Composants associés
Cyberpunk_Food_Nav
Un composant de navigation simple et réactif sur le thème du cyberpunk pour les sites Web de restauration, avec des arrière-plans sombres, des accents néon et une prise en charge du mode sombre.
Composant de navigation dans les médias sociaux
Un composant de navigation simple et réactif pour les applications de médias sociaux, avec un thème sombre et une palette de couleurs complémentaires inspirée de Material Design. Il comprend un logo, des liens de navigation et un avatar utilisateur.
Navigation neumorphe sur les réseaux sociaux
Un composant de navigation simple et réactif sur les réseaux sociaux avec une conception neumorphique d’interface utilisateur douce. Il utilise une palette de couleurs monochromatique et prend en charge le mode sombre.