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.
Código HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-white dark:bg-gray-800 shadow-lg">
<div class="p-4">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
</div>
<nav class="mt-4">
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
</nav>
<!-- Profile Section -->
<div class="absolute bottom-0 w-full p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<p class="font-bold text-gray-800 dark:text-white">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">View Profile</p>
</div>
</div>
</div>
</div>
<!-- Main Content (responsive - adjust margin-left on larger screens) -->
<div class="flex-1 p-8">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to my Portfolio</h2>
<!-- Project Grid (Example) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image">
<div class="p-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Project Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image">
<div class="p-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Project Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image">
<div class="p-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de navegación de la barra lateral
Un componente de navegación de barra lateral simple y receptivo con efectos de desplazamiento centrados en la microinteracción, diseñado para sitios web gubernamentales / de servicio público. Cuenta con un esquema de color análogo y compatibilidad con el modo oscuro.
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.
Componente de navegación de la barra lateral
Una barra de navegación lateral simple y receptiva para aplicaciones de redes sociales, optimizada para el modo oscuro con un esquema de color análogo. Incluye una sección de perfil con un avatar y un nombre de usuario, y enlaces de navegación. El diseño utiliza Tailwind CSS para el estilo y la capacidad de respuesta, con soporte para el modo oscuro a través del prefijo dark: incorporado de Tailwind.