Composant de la barre latérale Neumorphism
Un composant de barre latérale réactif avec un design Neumorphism, une palette de couleurs Earth tones et une complexité simple, adapté aux blogs ou à la consommation de contenu. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex h-screen bg-gray-200 dark:bg-gray-800">
<!-- Sidebar -->
<div class="w-64 bg-gray-300 dark:bg-gray-700 p-6 space-y-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<!-- Logo or Blog Title -->
<div class="text-2xl font-bold text-gray-800 dark:text-white">My Blog</div>
<!-- Navigation -->
<nav>
<a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Home</a>
<a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">About</a>
<a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Contact</a>
</nav>
<!-- Categories or other links -->
<div class="space-y-2">
<div class="text-sm font-semibold text-gray-600 dark:text-gray-300">Categories</div>
<a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Technology</a>
<a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Travel</a>
<a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Food</a>
</div>
</div>
<!-- Main Content Area (optional - just for demonstration) -->
<div class="flex-1 p-6 overflow-y-auto">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to the Blog</h1>
<p class="text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is on the left.</p>
</div>
</div>
<!-- Add custom CSS for Neumorphism effect -- In a separate CSS file or style tag -->
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7acb1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #323232;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #a7acb1, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #323232;
}
</style>Composants associés
Composant de la barre latérale
Un composant de barre latérale réactif pour un portfolio, avec un style de conception 3D avec un thème sombre, adapté à la présentation de travaux ou de produits, avec quelques éléments interactifs et une palette de couleurs analogue.
Composant de la barre latérale
Un composant de barre latérale réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS. Il présente une interface utilisateur douce avec des ombres subtiles, prend en charge le mode sombre et comprend des images de remplacement et un avatar.
Composant de la barre latérale
Un composant de barre latérale réactif conçu dans un style rétro/vintage avec des couleurs vives pour une disposition de tableau de bord. Il inclut la prise en charge du mode sombre.