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 réactif conçu avec les concepts de conception matérielle à l’aide de Tailwind CSS, avec la prise en charge du thème sombre et des images de remplacement.
Composants d’amélioration de la navigation
Un composant de navigation conçu avec une esthétique brutaliste, avec des designs audacieux, un contraste élevé et des mises en page inhabituelles. Il comprend des effets réactifs et prend en charge les thèmes sombres avec CSS.
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.