Composant de navigation dans la barre latérale
Composant de navigation dans la barre latérale réactive avec prise en charge du mode sombre. Design minimaliste/plat, palette de couleurs monochromatique, interface complexe pour les portfolios. Utilise Tailwind CSS, picsum.photos et randomuser.me. Pas de JavaScript.
HTML Code
<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>Composants associés
Composant de navigation dans la barre latérale
Un composant de navigation simple et réactif conçu pour les tableaux de bord, avec des animations attrayantes et une palette de couleurs terreuses. Il prend en charge le mode sombre.
Navigation dans la barre latérale du commerce électronique
Un composant de navigation de barre latérale simple et réactif pour les sites Web de commerce électronique, doté d’un schéma de couleurs triadique, de micro-interactions au survol et de la prise en charge du mode sombre, conçu avec Tailwind CSS.
Composant de navigation dans la barre latérale
Un composant de navigation de barre latérale réactif stylisé de manière skeuomorphique avec prise en charge du thème sombre à l’aide de Tailwind CSS.