Componentes Barra lateral Componente de la barra lateral

Componente de la barra lateral

Un componente de barra lateral receptivo para mostrar elementos de cartera con microinteracciones atractivas y un esquema de color complementario, compatible con el modo oscuro.

Vista previa

Código HTML

<aside class="w-64 h-full bg-white dark:bg-gray-800 shadow-lg transition-transform duration-300 ease-in-out transform hover:scale-105">  
    <div class="p-4">    
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Portfolio</h2>    
        <div class="mt-4">            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Projects</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About Me</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a>        
        </div>  
    </div>  
    <div class="flex flex-col items-center px-4 py-4">    
        <img src="https://picsum.photos/80/80" alt="Portfolio Avatar" class="rounded-full border-2 border-blue-500 dark:border-blue-400 mb-2" />    
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>    
        <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>  
    </div>  
</aside>

Componentes relacionados

Barra lateral de neumorfismo

Un componente de barra lateral de estilo Neumorphism con diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir

Barra lateral Pastel Skeuomórfico

Un componente de barra lateral simple y receptivo con diseño esqueuomórfico y colores pastel, adecuado para un blog o sitio de contenido. Incluye soporte para modo oscuro.

Abrir

Componente de la barra lateral

Un componente de barra lateral receptivo diseñado para aplicaciones de comercio electrónico con elementos de Material Design y una combinación de colores pastel, con soporte para modo oscuro.

Abrir