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
Componente Mappa del sito reattiva con supporto della modalità scura per l'e-commerce. Utilizza Tailwind CSS per lo stile. Segue una combinazione di colori analoga. Immagini da picsum.photos.
Componente Mappa del sito
Un componente sitemap in stile Material Design per le interfacce dei social media, con reattività e supporto per la modalità oscura utilizzando Tailwind CSS. Incorpora i toni della terra e la complessità media per le piattaforme di social networking.
Componente Mappa del sito
Componente della mappa del sito reattiva con microinterazioni, combinazione di colori monocromatici, design complesso, supporto per temi scuri e CSS Tailwind.