Composant de plan du site
Un composant de plan de site réactif conçu pour le mode sombre utilisant des couleurs pastel, adapté aux tableaux de bord.
HTML Code
<div class="bg-gray-800 text-gray-200 dark:bg-gray-900 dark:text-gray-300 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Site Map</h2>
<p class="mb-4">Overview of the main sections:</p>
<ul class="space-y-2">
<li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
<span>Dashboard</span>
</a>
</li>
<li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
<span>User Management</span>
</a>
</li>
<li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
<span>Reports</span>
</a>
</li>
<li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
<span>Settings</span>
</a>
</li>
</ul>
<div class="mt-6">
<p class="font-bold">User Profile</p>
<div class="flex items-center bg-gray-700 dark:bg-gray-800 rounded p-4 mt-2">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full mr-3">
<span>John Doe</span>
</div>
</div>
</div>Composants associés
Composant de plan du site
Un composant de plan de site simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs analogue, adapté aux sites Web industriels/manufacturiers, y compris la prise en charge du mode sombre.
Composant de plan du site
Un composant complexe de plan de site mettant en œuvre un style de conception skeuomorphism avec des couleurs de terre, prenant en charge un thème sombre. Conçu à des fins de blog/contenu avec des éléments interactifs, à l’aide de Tailwind CSS.
Composant de plan du site
Composant de plan de site avec design minimaliste/plat, effets réactifs et prise en charge du thème sombre.