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 sitemap réactif avec des micro-interactions, une palette de couleurs pastel et une prise en charge du thème sombre, adapté aux sites Web de commerce électronique. Il comprend un en-tête, une barre de recherche et plusieurs catégories avec des liens.
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.
Composant de plan du site
Un composant de plan de site réactif conçu avec glassmorphism, avec un effet translucide et un flou semblable à du verre dépoli pour un portfolio présentant des travaux ou des produits. Il prend en charge un thème sombre et utilise des couleurs complémentaires tout en conservant une complexité modérée.