Componente de navegación de la barra lateral
Un componente de navegación de barra lateral simple y receptivo diseñado para tableros, con animaciones atractivas y una combinación de colores terrosos. Es compatible con el modo oscuro.
Código HTML
<div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-lg transition-transform duration-300 ease-in-out">
<div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700 bg-green-600 dark:bg-green-800">
<h1 class="text-xl text-white font-bold">Dashboard</h1>
</div>
<nav class="flex-1 p-4">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
<img src="https://picsum.photos/seed/pic1/30/30" alt="Image 1" class="w-8 h-8 rounded-full mr-2">
<span>Reports</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
<img src="https://picsum.photos/seed/pic2/30/30" alt="Image 2" class="w-8 h-8 rounded-full mr-2">
<span>Settings</span>
</a>
</li>
</ul>
</nav>
<div class="p-4 border-t border-gray-300 dark:border-gray-700">
<a href="#" class="block text-center text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded p-2 transition-all duration-300 ease-in-out">Logout</a>
</div>
</div>Componentes relacionados
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
Un componente de navegación de la barra lateral adaptado para blogs, diseñado con elementos 3D y colores vibrantes. Admite el modo oscuro y es responsivo, con un diseño simple adecuado para el consumo de contenido.
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.