Componente de la barra lateral
Un componente de barra lateral responsivo y minimalista para comercio electrónico, con soporte para modo oscuro. Cuenta con un diseño simple con categorías de productos y un ícono de carrito de compras.
Código HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-white dark:bg-gray-800 shadow-md p-4">
<div class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Shop</div>
<nav>
<ul class="space-y-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Categories</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">New Arrivals</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Best Sellers</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Sale</a></li>
</ul>
</nav>
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
<a href="#" class="flex items-center text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
Shopping Cart
</a>
</div>
</div>
<!-- Main content area (for context) -->
<div class="flex-1 p-8">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Welcome to our Shop</h1>
<p class="text-gray-700 dark:text-gray-300">Select a category from the sidebar to start shopping.</p>
</div>
</div>Componentes relacionados
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.
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.
Neon_Glow_Grayscale_Sports_Sidebar
Un componente de barra lateral complejo y sensible para aplicaciones deportivas/fitness, con efectos de neón/brillo dentro de un esquema de color en escala de grises. Incluye compatibilidad con el modo oscuro y elementos interactivos como perfil, navegación, equipos y configuraciones.