Composants Barre latérale Composant de la barre latérale

Composant de la barre latérale

Un composant de barre latérale réactif pour présenter des éléments de portefeuille avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.

Aperçu

HTML Code

<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>

Composants associés

Barre latérale de blog simple et dynamique

Un composant de barre latérale simple et réactif pour le contenu du blog, conçu avec des couleurs vives et une sensation de matériau à l’aide de Tailwind CSS. Comprend des liens de navigation et une section de profil utilisateur. Prend en charge le mode sombre à l’aide du préfixe dark : de Tailwind. Fixé sur les grands écrans, caché sur les petits écrans.

Ouvrir