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
Composants de navigation
Un composant de navigation minimaliste pour un site Web de commerce électronique, avec un logo, une barre de recherche, des liens de navigation, une icône de panier d’achat et un avatar de l’utilisateur à l’aide de Tailwind CSS. Ce composant prend en charge le responsive design et le mode sombre.
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.
Navigation sociale brutaliste
Un composant de navigation simple et brutaliste pour les médias sociaux avec des couleurs complémentaires. Comprend la conception réactive et la prise en charge du mode sombre.