Composant de navigation collante - Neumorphisme
Un composant de navigation autocollant réactif avec un design Neumorphism, une palette de couleurs complémentaire et une prise en charge du thème sombre, adapté à un site Web de portfolio. Utilise Tailwind CSS avec des classes de mode sombre et inclut des ombres subtiles pour l’effet Neumorphism.
HTML Code
<nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="container mx-auto flex justify-between items-center">
<div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
<ul class="flex space-x-4">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
</li>
</ul>
</div>
</nav>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #545454;
}
</style>Composants associés
Composant de navigation autocollant - Mode sombre Pastel
Une barre de navigation autocollante conçue pour le mode sombre, avec une mise en page réactive et des accents de couleurs pastel. La barre de navigation reste en haut de la fenêtre d’affichage lorsque l’utilisateur fait défiler l’écran, ce qui améliore la convivialité des pages à fort contenu. Il comprend des espaces réservés pour un logo ou un titre de site et des liens de navigation, stylisés avec Tailwind CSS pour un look moderne et épuré.
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.
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.