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.
Código HTML
<div class="flex flex-col w-64 h-screen p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
<h1 class="text-3xl font-bold text-vibrant-500 dark:text-vibrant-300">Shop Sidebar</h1>
<ul class="mt-6 space-y-4">
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Products</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Categories</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Deals</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Account</span>
</a>
</li>
</ul>
<div class="mt-6">
<a href="#" class="flex items-center justify-center h-12 bg-vibrant-500 text-white font-bold rounded-lg shadow-lg hover:bg-vibrant-600 transition ease-in-out duration-150">
<span>View Cart</span>
</a>
</div>
<div class="mt-auto">
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8 mr-3">
<span>Profile</span>
</a>
</div>
</div>
Componentes relacionados
RetroSidebarNavigation
Un componente de navegación de la barra lateral de estilo retro/vintage con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Navegación lúdica y educativa por la barra lateral
Un componente de navegación de barra lateral complejo, divertido y receptivo para plataformas educativas, con tonos tierra, elementos redondeados y compatibilidad con el modo oscuro. Incluye perfil de usuario, navegación principal, progreso del curso y enlaces rápidos.
Componente de navegación de la barra lateral - Agricultura/Ganadería
Un componente de navegación de barra lateral complejo y minimalista diseñado para sitios web de agricultura/ganadería. Cuenta con colores en tono joya, capacidad de respuesta completa, compatibilidad con modo oscuro y múltiples elementos interactivos adecuados para paneles y sistemas de gestión en contextos agrícolas.