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.
HTML Code
<nav class="bg-gradient-to-r from-teal-400 via-emerald-500 to-cyan-500 dark:from-teal-800 dark:via-emerald-900 dark:to-cyan-900 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white text-2xl font-bold">Dashboard</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
Home
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
<a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
Analytics
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
<a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
Reports
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
<a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
Settings
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
</div>
<div class="md:hidden">
<button class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<div class="md:hidden mt-4">
<a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Home</a>
<a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Analytics</a>
<a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Reports</a>
<a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Settings</a>
</div>
</nav>Composants associés
JobBoardNavigation
Un composant de navigation simple et réactif pour un site d’offres d’emploi ou une plateforme de développement de carrière, avec des tons océan/bleu, des micro-interactions au survol et la prise en charge du mode sombre.
Barre de navigation rétro E-commerce
Un composant de navigation en niveaux de gris de style rétro/vintage pour le commerce électronique, présentant une complexité modérée avec des éléments interactifs tels que des survols et des listes déroulantes. Il est réactif et inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
Navigation brutaliste sur les réseaux sociaux
Un composant de navigation réactif conçu dans un style brutaliste pour les applications de médias sociaux, utilisant une palette de couleurs complémentaires et des éléments minimaux.