Navigation ludique sur le tableau de bord
Un composant de navigation simple, ludique et réactif sur le tableau de bord utilisant des tons précieux avec des éléments arrondis et une prise en charge complète du mode sombre.
HTML Code
<nav class="bg-emerald-400 dark:bg-emerald-800 p-4 rounded-b-3xl shadow-lg">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
<a href="#" class="text-white text-2xl font-bold tracking-tight mb-4 md:mb-0 dark:text-emerald-100">Dashboard Fun</a>
<button class="md:hidden text-white dark:text-emerald-100 focus:outline-none" aria-label="Toggle navigation">
<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 12h16m-4 6h4"></path>
</svg>
</button>
<ul class="hidden md:flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-lg">
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Overview</span>
</a>
</li>
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Analytics</span>
</a>
</li>
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Reports</span>
</a>
</li>
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Settings</span>
</a>
</li>
</ul>
<!-- Mobile menu (hidden by default) - A JavaScript toggle would be needed for this -->
<ul class="md:hidden flex-col items-center mt-4 space-y-3 w-full text-lg" id="mobile-menu-items">
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Overview
</a>
</li>
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Analytics
</a>
</li>
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Reports
</a>
</li>
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Settings
</a>
</li>
</ul>
</div>
</nav>Composants associés
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.
Brutalist_Dating_Navigation_Simple
Une barre de navigation simple, d’inspiration brutaliste, pour une application de rencontre/sociale, avec des éléments très contrastés, des neutres chauds et une réactivité totale avec prise en charge du mode sombre.
Swiss_International_Navigation_Fashion_Beauty
Un composant de navigation complexe et réactif pour les marques de mode/beauté, adhérant aux principes de conception de la typographie suisse/internationale avec une palette de couleurs bleues d’entreprise. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.