Composant de la barre latérale
Un composant de barre latérale minimaliste avec un design réactif et une prise en charge du thème sombre, utilisant Tailwind CSS.
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<aside class="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out">
<div class="px-6 py-4">
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
<h1 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h1>
</div>
<nav>
<ul class="space-y-2">
<li>
<a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Dashboard</a>
</li>
<li>
<a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Profile</a>
</li>
<li>
<a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Settings</a>
</li>
<li>
<a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Support</a>
</li>
</ul>
</nav>
</div>
</aside>
<main class="flex-grow p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome to your Dashboard</h2>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 1</h3>
<p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 2</h3>
<p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
</div>
</div>
</main>
</div>Composants associés
3D_Earth_Tones_Non_Profit_Sidebar
Un composant de barre latérale complexe et réactif avec des éléments de conception 3D et une palette de couleurs de terre, adapté aux sites Web à but non lucratif et caritatifs. Inclut la prise en charge du mode sombre et du HTML sémantique.
Neon_Glow_Grayscale_Sports_Sidebar
Un composant de barre latérale complexe et réactif pour les applications de sport/fitness, avec des effets de néon/lueur dans une palette de couleurs en niveaux de gris. Inclut la prise en charge du mode sombre et des éléments interactifs tels que le profil, la navigation, les équipes et les paramètres.
Composant de la barre latérale des soins de santé
Un composant de barre latérale complexe, minimaliste et réactif pour les applications de santé, doté d’une palette de couleurs analogue et d’une prise en charge du mode sombre. Comprend la navigation, le profil de l’utilisateur et les liens rapides.