Componente Mappa del sito
Un componente della mappa del sito reattivo progettato per la modalità oscura utilizzando colori pastello, adatto per le dashboard.
Codice HTML
<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>Componenti correlati
Componente Mappa del sito
Un componente della mappa del sito in stile 3D con design reattivo e supporto per la modalità scura. Presenta elementi tridimensionali per la profondità e il coinvolgimento, utilizzando immagini segnaposto e avatar casuali.
Neon_Glow_Sports_Sitemap_Component
Un componente sitemap semplice e reattivo con effetti neon/bagliori e colori ad alto contrasto, su misura per applicazioni sportive/fitness. Include il supporto per la modalità oscura.
Componente Mappa del sito
Un componente semplice e reattivo della mappa del sito con un design ispirato alla carta/stampa e una combinazione di colori analoga, adatto per siti Web manifatturieri/industriali, incluso il supporto della modalità scura.