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 simple y receptivo diseñado para tableros, con animaciones atractivas y una combinación de colores terrosos. Es compatible con el modo oscuro.
Navegación de la barra lateral de comercio electrónico
Un componente de navegación de barra lateral simple y receptivo para sitios web de comercio electrónico, con un esquema de color triádico, microinteracciones al pasar el mouse y soporte para modo oscuro, creado con Tailwind CSS.
Componente de navegación de la barra lateral: escala de grises
Componente de navegación de la barra lateral responsiva