Componente della barra laterale del neumorfismo
Un componente della barra laterale reattivo con design a neumorfismo, combinazione di colori dei toni della terra e complessità semplice, adatto per blog o consumo di contenuti. Include il supporto per la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente della barra laterale retrò
Un componente della barra laterale reattivo con un design retrò/vintage per mostrare lavori o prodotti, utilizzando una combinazione di colori in scala di grigi e classi CSS Tailwind, che supporta la modalità oscura.
Componente della barra laterale
Un componente della barra laterale reattivo progettato per applicazioni di e-commerce con elementi di Material Design e una combinazione di colori pastello, con supporto per la modalità scura.
Componente della barra laterale
Un componente della barra laterale progettato con uno stile scheumorfico che offre una sensazione del mondo reale in un formato digitale. Supporta un design reattivo e un tema scuro.