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.
Código HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-gray-800 text-white dark:bg-gray-950 dark:text-gray-200 flex flex-col">
<div class="p-6 text-2xl font-bold border-b border-gray-700 dark:border-gray-800">BrutalNav</div>
<nav class="flex-grow">
<a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Home</a>
<a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">About</a>
<a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Services</a>
<a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Contact</a>
</nav>
</div>
<!-- Content Area (placeholder) -->
<div class="flex-grow p-10 text-gray-800 dark:text-gray-200">
<h1 class="text-3xl font-bold mb-6">Main Content</h1>
<p>This is the main content area. The sidebar is on the left.</p>
</div>
</div>Componentes relacionados
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.
Componente de la barra lateral
Un componente minimalista de la barra lateral con diseño responsivo y soporte para temas oscuros, que utiliza Tailwind CSS.
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.