Barre de navigation E-commerce
Neumorphism Barre de navigation e-commerce avec Earth Tones
HTML Code
<nav class="bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="text-gray-700 dark:text-gray-300 font-bold text-xl">E-Shop</div>
<div class="flex space-x-4">
<input type="text" placeholder="Search..." class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full py-2 px-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark focus:outline-none">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
Cart
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
Account
</a>
</div>
</div>
</nav>
<style>
/* Add these to your Tailwind configuration */
/*
module.exports = {
theme: {
extend: {
boxShadow: {
'neumorphic-light': '9px 9px 16px rgb(163,177,198,.6), -9px -9px 16px rgba(255,255,255, .5)',
'neumorphic-dark': '9px 9px 16px rgba(0,0,0,.6), -9px -9px 16px rgba(50, 50, 50, .5)',
'neumorphic-inset-light': 'inset 3px 3px 7px rgba(163,177,198,.6), inset -3px -3px 7px rgba(255,255,255,.5)',
'neumorphic-inset-dark': 'inset 3px 3px 7px rgba(0,0,0,.6), inset -3px -3px 7px rgba(50, 50, 50,.5)',
}
}
}
}
*/
</style>Composants associés
Navigation sur les réseaux sociaux Monospace
Il s’agit d’un composant de navigation complexe et réactif pour les applications de médias sociaux, doté d’une esthétique monospace/développeur avec des couleurs sourdes et une prise en charge du mode sombre. Comprend le profil utilisateur, la recherche, les notifications et les liens de navigation principaux.
Navigation brutaliste dans le commerce électronique
Un composant de navigation de style brutaliste pour le commerce électronique, doté d’une palette de couleurs en niveaux de gris, d’une mise en page complexe, d’une réactivité et d’une prise en charge du mode sombre, construit avec Tailwind CSS.
RétroNav
Un composant de navigation simple, réactif et compatible avec le mode sombre avec un design rétro/vintage, une palette de couleurs vives et des éléments minimaux, adapté aux sites Web de commerce électronique.