Navigation dans le tableau de bord (Material Design)
Composant de navigation de tableau de bord de conception matérielle avec schéma de couleurs triadique et prise en charge du mode sombre.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="text-gray-800 dark:text-white font-bold text-xl">Dashboard</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-teal-500 dark:hover:text-teal-400 transition duration-300">Analytics</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-red-500 dark:hover:text-red-400 transition duration-300">Settings</a>
</div>
</div>
</div>
</nav>Composants associés
Composant de navigation par neumorphisme
Composant de navigation Neumorphism optimisé pour les sites Web de portfolio. Il présente une mise en page complexe avec plusieurs éléments interactifs, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. La palette de couleurs est analogue.
Composant de navigation skeuomorphe
Un composant de navigation skeuomorphe conçu pour imiter des éléments du monde réel tels qu’un panneau de commande physique ou un tableau de bord. Dispose d’un design réactif, d’effets de survol qui simulent l’appui sur des boutons physiques et d’une prise en charge du thème sombre. La navigation comprend des ombres, des dégradés et des textures subtils pour créer une apparence tactile 3D rappelant les interfaces physiques.
Composant de navigation
Un composant de navigation réactif en mode sombre conçu pour le commerce électronique avec une palette de couleurs pastel et une mise en page simple.