Brutalismo Barra lateral Navegación
Componente de navegación de barra lateral receptivo con diseño brutalista, combinación de colores vibrantes y diseño simple para fines de blog / contenido. Incluye soporte para modo oscuro.
Código HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
<h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
<nav class="mt-8">
<ul>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- Content Area (for demonstration) -->
<div class="flex-1 p-10">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
<p class="text-gray-700 dark:text-gray-300">
This is where the main content of your blog or article would go.
The sidebar provides navigation on the left.
</p>
</div>
</div>Componentes relacionados
Componente de navegación de la barra lateral
Un componente de navegación de barra lateral simple y receptivo con un estilo de diseño industrial, un esquema de color neutro cálido y soporte para modo oscuro, adecuado para aplicaciones de criptomonedas / blockchain.
Componente de navegación de la barra lateral
Un componente de navegación de barra lateral receptivo con un estilo esqueuomórfico con soporte para temas oscuros usando Tailwind CSS.
Componente de navegación de la barra lateral
Un componente de navegación de barra lateral receptivo diseñado en el estilo Brutalismo, perfecto para aplicaciones de comercio electrónico. Cuenta con colores vibrantes, alto contraste y múltiples elementos interactivos, incluidos enlaces a diferentes categorías de compras, opciones de cuentas de usuario y un vibrante botón de llamada a la acción para acceder al carrito de compras. El diseño también se adapta al modo oscuro.