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
Barra lateral de Glassmorphism con modo oscuro
Un componente de barra lateral responsivo con diseño de glassmorphism y soporte de modo oscuro usando Tailwind CSS. Incluye un logotipo, el nombre del sitio, enlaces de navegación y una sección de perfil de usuario.
Componente de la barra lateral
Un componente de barra lateral receptivo para mostrar elementos de cartera con microinteracciones atractivas y un esquema de color complementario, compatible con el modo oscuro.
Componente de la barra lateral
Un componente de barra lateral responsivo que usa Tailwind CSS, con principios de Material Design y soporte para temas oscuros. Incluye un encabezado con un logotipo y un título, y un menú de navegación con enlaces.