Componente de la barra lateral
Un componente de barra lateral receptivo diseñado en un estilo retro/vintage con colores vibrantes para un diseño de tablero. Incluye soporte para el modo oscuro.
Código HTML
<div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
<h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
</div>
<div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-sm font-semibold">John Doe</span>
</div>
</div>
</div>Componentes relacionados
Componente de la barra lateral
Un componente de barra lateral de estilo Glassmorphism con un esquema de color complementario, diseñado para un sitio web de portafolio con complejidad moderada. Es responsivo y admite el modo oscuro usando Tailwind CSS.
Barra lateral de neumorfismo
Un componente de barra lateral de estilo Neumorphism con diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS.
RetroRealEstateSidebar
Un componente de barra lateral simple y receptivo con una estética retro / vintage, combinación de colores neutros cálidos, diseñado para plataformas inmobiliarias. Incluye soporte para modo oscuro.