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.
Código HTML
<aside class="bg-gray-800 dark:bg-gray-900 w-64 h-screen shadow-lg transform transition-transform duration-300 relative hover:translate-x-1 hover:shadow-2xl">
<div class="flex items-center justify-center h-16 border-b border-gray-700 dark:border-gray-600">
<h1 class="text-white text-lg font-bold">My Portfolio</h1>
</div>
<nav class="flex flex-col p-4">
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Home</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>About</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Projects</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Contact</span>
</a>
</nav>
<footer class="absolute bottom-0 left-0 w-full border-t border-gray-700 dark:border-gray-600 p-4">
<p class="text-gray-500 text-sm text-center">© 2023 My Portfolio</p>
</footer>
</aside>Componentes relacionados
Barra lateral de Agricultura de degradado
Un componente de barra lateral simple y receptivo con un diseño de degradado monocromático, adecuado para sitios web de agricultura y ganadería. Incluye soporte para modo oscuro.
Componente de la barra lateral
Un componente de barra lateral de estilo Glassmorphism con un esquema de color complementario, diseñado para un sitio web de portafolio con complejidad moderada. Es responsivo y admite el modo oscuro usando Tailwind CSS.
Barra lateral de blog simple y vibrante
Un componente de barra lateral simple y receptivo para el contenido del blog, diseñado con colores vibrantes y una sensación similar a la de un material utilizando Tailwind CSS. Incluye enlaces de navegación y una sección de perfil de usuario. Admite el modo oscuro usando el prefijo dark: de Tailwind. Fijo en pantallas más grandes, oculto en pantallas más pequeñas.