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 de criptomonedas
Un componente de barra lateral complejo y receptivo diseñado para aplicaciones de criptomonedas y blockchain, que presenta principios de diseño de materiales con un esquema de color apagado y soporte completo para el modo oscuro.
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.
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.