Composant Composants de navigation
Un composant de navigation rétro-vintage pour un tableau de bord, avec une mise en page complexe avec des couleurs complémentaires, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend un logo, des liens de navigation, une barre de recherche et des informations de profil utilisateur.
HTML Code
<nav class="bg-gradient-to-r from-purple-800 to-indigo-800 dark:from-gray-900 dark:to-gray-700 p-4 shadow-lg">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="flex items-center space-x-4">
<a href="#" class="text-white text-3xl font-bold font-mono tracking-wider">RETRO-DASH</a>
<div class="hidden md:flex space-x-6 ml-8">
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
</div>
</div>
<div class="flex items-center space-x-6 mt-4 md:mt-0">
<div class="relative">
<input type="text" placeholder="Search..." class="bg-purple-700 dark:bg-gray-800 text-white placeholder-purple-300 dark:placeholder-gray-500 rounded-full py-2 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-gray-600 transition duration-300 ease-in-out w-48 md:w-64">
<svg class="w-5 h-5 text-purple-300 dark:text-gray-500 absolute right-3 top-2.5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<div class="relative group">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-gray-600 cursor-pointer">
<div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl py-1 hidden group-hover:block transition duration-300 ease-in-out z-10">
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Profile</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Logout</a>
</div>
</div>
<button class="md:hidden text-white focus:outline-none">
<svg class="w-8 h-8" 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 class="w-full md:hidden mt-4">
<div class="flex flex-col space-y-2">
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
</div>
</div>
</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.
Composante de navigation 43
Un composant de navigation réactif suivant les principes de conception skeuomorphique, avec des éléments numériques qui imitent leurs homologues du monde réel, avec prise en charge du thème sombre.
Composant de navigation skeuomorphe
Un composant de navigation conçu avec un style skeuomorphe, avec une palette de couleurs complémentaires, adapté à un tableau de bord avec visualisation de données et panneaux de contrôle. Il comprend des éléments interactifs pour l’engagement des utilisateurs.