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
Composant de la barre latérale
Un composant de barre latérale réactif en mode sombre conçu à l’aide de Tailwind CSS, avec des arrière-plans sombres, des effets de survol et des espaces réservés pour les images et les avatars.
Composant de la barre latérale
Un composant de barre latérale réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS. Il présente une interface utilisateur douce avec des ombres subtiles, prend en charge le mode sombre et comprend des images de remplacement et un avatar.
Composant de la barre latérale de crypto-monnaie
Un composant de barre latérale complexe et réactif conçu pour les applications de crypto-monnaie et de blockchain, avec des principes de conception matérielle avec une palette de couleurs sourdes et une prise en charge complète du mode sombre.