Barre latérale sur le neumorphisme
Un composant de barre latérale de style Neumorphisme avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex h-screen bg-gray-200 dark:bg-gray-800">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphism dark:shadow-neumorphism-dark m-4">
<div class="flex items-center justify-center h-16 mt-8">
<div class="h-12 w-12 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-inset dark:shadow-neumorphism-dark-inset flex items-center justify-center">
<svg class="h-6 w-6 text-gray-600 dark:text-gray-300" 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 12h16M4 18h7"></path></svg>
</div>
</div>
<div class="mt-8">
<nav>
<a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
<svg class="h-6 w-6 mr-3" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7h-4m0 0l-4-4m4 4l4 4"></path></svg>
Home
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
<svg class="h-6 w-6 mr-3" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
Services
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
<svg class="h-6 w-6 mr-3" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
About
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
<svg class="h-6 w-6 mr-3" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-18 4v4a2 2 0 002 2h14a2 2 0 002-2v-4"></path></svg>
Contact
</a>
</nav>
</div>
<div class="mt-auto mb-8">
<div class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-inset dark:shadow-neumorphism-dark-inset mr-3">
<div class="text-gray-700 dark:text-gray-200">
John Doe
</div>
</div>
</div>
</div>
<!-- Content area (can be added here) -->
<div class="flex-1 p-8">
<!-- Your content goes here -->
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #414141, -7px -7px 15px #b9b9b9;
}
.shadow-neumorphism-inset {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphism-dark-inset {
box-shadow: inset 5px 5px 10px #414141, inset -5px -5px 10px #b9b9b9;
}
</style>Composants associés
Composant de la barre latérale
Un composant de barre latérale réactif pour présenter des éléments de portefeuille avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.
Composant de la barre latérale
Un composant de barre latérale complexe, réactif, de style Glassmorphism pour un tableau de bord, avec des tons de terre et la prise en charge du mode sombre.
Composant de la barre latérale
Un composant de barre latérale minimaliste avec un design réactif et une prise en charge du thème sombre, utilisant Tailwind CSS.