Composant Composants d’amélioration de la navigation
Un composant de navigation complexe de style brutaliste pour les sites Web d’entreprise avec une palette de couleurs analogue, un design réactif et une prise en charge du mode sombre. Présente des mises en page inhabituelles et un contraste élevé.
HTML Code
<nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center flex-wrap">
<div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
<div class="block lg:hidden">
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
<ul class="lg:flex items-center justify-end flex-1">
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
</li>
<li class="my-2 lg:my-0">
<div class="relative">
<button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
Dropdown
</button>
<div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
<a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
<a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>Composants associés
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.
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 conçu avec le skeuomorphisme, avec des éléments numériques qui imitent leurs homologues du monde réel. Il est stylisé à l’aide de Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.