Componente de la barra lateral de neumorfismo
Un componente de barra lateral receptivo con diseño de neumorfismo, combinación de colores en tonos tierra y complejidad simple, adecuado para blogs o consumo de contenido. Incluye soporte para modo oscuro.
Código 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>Componentes relacionados
Componente de la barra lateral de criptomonedas
Un componente de barra lateral complejo y receptivo diseñado para aplicaciones de criptomonedas y blockchain, que presenta principios de diseño de materiales con un esquema de color apagado y soporte completo para el modo oscuro.
Componente de la barra lateral
Un componente de barra lateral de estilo Glassmorphism con un esquema de color complementario, diseñado para un sitio web de portafolio con complejidad moderada. Es responsivo y admite el modo oscuro usando Tailwind CSS.
Barra lateral de Skeuomorphism
Un componente de barra lateral responsivo con diseño de Skeuomorphism y soporte de modo oscuro usando Tailwind CSS.