Composants d’amélioration de la navigation
Un composant de navigation conçu en 3D avec une palette de couleurs analogue, une complexité modérée, adapté à la visualisation des données de tableau de bord et aux panneaux de contrôle.
HTML Code
<nav class="bg-gray-800 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
<div class="container mx-auto flex items-center justify-between">
<h1 class="text-white text-2xl font-bold">Dashboard</h1>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Home</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-300 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 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<div class="mt-4 md:hidden">
<a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Home</a>
<a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
<a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700 dark:border-gray-300 mr-3">
<div class="text-white">
<p class="text-sm">John Doe</p>
<p class="text-xs text-gray-400">Admin</p>
</div>
</div>
<div class="mt-4 bg-gray-700 dark:bg-gray-800 rounded-lg shadow-md p-4">
<h2 class="text-white text-lg font-semibold">Quick Links</h2>
<ul class="mt-2 space-y-2">
<li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Profile</a></li>
<li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Messages</a></li>
<li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Alerts</a></li>
</ul>
</div>
</nav>Composants associés
E-commerce Navigation industrielle
Un composant complexe de navigation e-commerce de style industriel avec des matériaux bruts et des éléments apparents esthétiques. Dispose d’un schéma monochrome en noir et blanc avec un accent brillant, entièrement réactif avec prise en charge du mode sombre.
Nature-Inspired_Entertainment_Navigation
Un composant de navigation complexe, inspiré de la nature, pour les plateformes de divertissement et de médias, avec des lignes fluides et des combinaisons de couleurs sucrées. Entièrement réactif avec prise en charge du mode sombre.
Composants d’amélioration de la navigation
Un composant de navigation de style Neumorphism avec prise en charge du mode sombre et conception réactive