Composant de navigation collante
Un composant de navigation autocollant avec une conception Neumorphism, une palette de couleurs complémentaire, une complexité modérée et une prise en charge réactive du thème sombre pour un tableau de bord. La conception intègre des ombres douces pour l’effet Neumorphism et utilise des couleurs complémentaires pour créer une interface visuellement attrayante. Il convient à un tableau de bord fournissant des panneaux de visualisation de données et de contrôle.
HTML Code
<nav class="dark:bg-gray-800 dark:text-gray-200 bg-gray-200 text-gray-800 p-4 sticky top-0 z-50 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="container mx-auto flex items-center justify-between">
<div class="text-2xl font-semibold">Dashboard</div>
<ul class="flex space-x-6">
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Overview</a></li>
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Analytics</a></li>
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Reports</a></li>
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Settings</a></li>
</ul>
<div class="flex items-center space-x-4">
<img class="w-8 h-8 rounded-full"
src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<button class="dark:text-gray-200 text-gray-800 focus:outline-none">
<svg class="w-6 h-6" 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-9.127a9.006 9.006 0 00-7.872 7.872m15.744 0A9.006 9.006 0 0112 21.003m-4.127-8.003a9.006 9.006 0 017.872-7.872m0 15.744a9.006 9.006 0 00-7.872-7.872"></path>
</svg>
</button>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
}
</style>
</nav>Composants associés
Composant de navigation collante
Un composant de navigation autocollant conçu pour le mode sombre avec des effets réactifs utilisant Tailwind CSS.
Composant de navigation collante
Une barre de navigation autocollante complexe et skeuomorphe aux couleurs vives, conçue pour les interfaces de médias sociaux. Comprend un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Comprend une image de profil, une barre de recherche, des notifications et des icônes de messagerie.
Brutalisme Navigation collante
Un composant de navigation autocollant complexe avec un design brutaliste, une palette de couleurs monochromatiques, conçu pour les portfolios, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.