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.
Código HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<aside class="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out">
<div class="px-6 py-4">
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
<h1 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h1>
</div>
<nav>
<ul class="space-y-2">
<li>
<a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Dashboard</a>
</li>
<li>
<a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Profile</a>
</li>
<li>
<a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Settings</a>
</li>
<li>
<a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Support</a>
</li>
</ul>
</nav>
</div>
</aside>
<main class="flex-grow p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome to your Dashboard</h2>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 1</h3>
<p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 2</h3>
<p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
</div>
</div>
</main>
</div>Componentes relacionados
Componente de la barra lateral
Un componente de barra lateral responsivo para un portafolio, con un estilo de diseño 3D con un tema oscuro, adecuado para mostrar trabajos o productos, con algunos elementos interactivos y un esquema de color análogo.
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.
Neon_Glow_Grayscale_Sports_Sidebar
Un componente de barra lateral complejo y sensible para aplicaciones deportivas/fitness, con efectos de neón/brillo dentro de un esquema de color en escala de grises. Incluye compatibilidad con el modo oscuro y elementos interactivos como perfil, navegación, equipos y configuraciones.