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
Componente de navegación de la barra lateral
Componente de navegación de barra lateral receptivo con soporte para modo oscuro. Diseño minimalista/plano, combinación de colores monocromática, interfaz compleja para carteras. Utiliza Tailwind CSS, picsum.photos y randomuser.me. Sin JavaScript.
Glassmorphism Sidebar Navigation
Un componente de navegación de barra lateral receptivo con diseño de Glassmorphism, compatibilidad con modo oscuro y uso de Tailwind CSS. Cuenta con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque.
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.