Barra lateral Pastel Skeuomórfico
Un componente de barra lateral simple y receptivo con diseño esqueuomórfico y colores pastel, adecuado para un blog o sitio de contenido. Incluye soporte para modo oscuro.
Código HTML
<div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-gray-700 shadow-md">
<span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Blog Menu</span>
</div>
<nav class="flex-grow p-4">
<ul class="space-y-2">
<li>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
Home
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
About
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
Contact
</a>
</li>
</ul>
</nav>
</div>Componentes relacionados
Componente de barra lateral retro
Un componente de barra lateral receptivo con un diseño retro/vintage para exhibir trabajos o productos, utilizando un esquema de color en escala de grises y clases CSS de Tailwind, que admite el modo oscuro.
Componente de la barra lateral
Un componente de barra lateral de modo oscuro responsivo diseñado con Tailwind CSS, con fondos oscuros, efectos de desplazamiento y marcadores de posición para imágenes y avatares.
Componente de la barra lateral
Un componente de barra lateral simple y receptivo con un diseño brutalista, combinación de colores monocromática y compatibilidad con el modo oscuro.