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.
HTML Code
<nav class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg p-4">
<div class="flex justify-between items-center">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
<span class="text-lg font-bold text-gray-800 dark:text-gray-200">MyApp</span>
</a>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
</button>
</div>
</div>
<div class="mt-2 md:hidden">
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
</div>
</nav>Composants associés
Composante de navigation brutaliste
Un composant de navigation brutaliste avec un comportement réactif et une prise en charge du thème sombre.
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.
Navigation CRM minimaliste
Un composant de navigation simple et minimaliste pour CRM/Business Tools, doté d’une palette de couleurs violet/violet et d’une réactivité totale avec prise en charge du mode sombre.