Componente de navegación de la barra lateral
Un componente de navegación de barra lateral receptivo con un estilo esqueuomórfico con soporte para temas oscuros usando Tailwind CSS.
Código HTML
<div class="flex">
<aside class="bg-gray-900 text-white w-64 h-screen shadow-lg rounded-r-3xl p-5">
<div class="flex flex-col items-center mb-10">
<img class="rounded-full border-4 border-gray-700" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" width="100" height="100" />
<h2 class="mt-3 text-xl font-bold">John Doe</h2>
<p class="text-gray-400">Web Developer</p>
</div>
<nav>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=1" alt="Icon" />
Dashboard
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=2" alt="Icon" />
Profile
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=3" alt="Icon" />
Settings
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=4" alt="Icon" />
Help
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=5" alt="Icon" />
Logout
</a>
</li>
</ul>
</nav>
</aside>
<main class="flex-1 p-10 bg-gray-200">
<h1 class="text-3xl font-bold">Main Content Area</h1>
<p>This is where your main content goes.</p>
</main>
</div>Componentes relacionados
Componente de navegación de la barra lateral
Un componente de navegación de barra lateral complejo y receptivo con un esquema de color triádico y transiciones de degradado, diseñado para una interfaz de tablero. Incluye soporte para modo oscuro y múltiples elementos interactivos.
Gaming_Sidebar_Navigation_Component
Un componente de navegación de barra lateral receptivo para sitios web de juegos, con un diseño monoespaciado/inspirado en desarrolladores con alto contraste, compatibilidad con modo oscuro y elementos interactivos. Ideal para interfaces de juegos y portales comunitarios.
Glassmorphism Sidebar Navigation
Un componente de navegación de barra lateral receptiva al estilo de Glassmorphism para carteras, con soporte para modo oscuro y combinación de colores análoga. Cuenta con efectos de vidrio esmerilado y múltiples elementos interactivos que usan solo HTML y Tailwind CSS.