Componente Mappa del sito
Un componente della mappa del sito reattivo con i principi di Material Design e ottimizzato per l'e-commerce, con colori pastello e supporto per la modalità scura.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-md shadow-md">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-4 bg-blue-100 dark:bg-blue-900 rounded shadow">
<h3 class="font-semibold text-lg text-blue-800 dark:text-blue-200">Products</h3>
<ul class="mt-2">
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">New Arrivals</a></li>
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Featured</a></li>
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Best Sellers</a></li>
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sales</a></li>
</ul>
</div>
<div class="p-4 bg-green-100 dark:bg-green-900 rounded shadow">
<h3 class="font-semibold text-lg text-green-800 dark:text-green-200">Categories</h3>
<ul class="mt-2">
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Men</a></li>
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Women</a></li>
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Kids</a></li>
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Accessories</a></li>
</ul>
</div>
<div class="p-4 bg-pink-100 dark:bg-pink-900 rounded shadow">
<h3 class="font-semibold text-lg text-pink-800 dark:text-pink-200">Support</h3>
<ul class="mt-2">
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Customer Service</a></li>
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Returns</a></li>
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">FAQs</a></li>
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Contact Us</a></li>
</ul>
</div>
</div>
<div class="mt-8">
<h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">User Profile</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">Featured Image</h3>
<img src="https://picsum.photos/300/200" alt="Featured" class="mt-2 rounded-md shadow">
</div>
</div>Componenti correlati
Componente della mappa del sito Glassmorphism
Un componente della mappa del sito reattivo con un design a morfismo in vetro, una combinazione di colori analoga e il supporto della modalità scura, adatto per siti Web aziendali e aziendali.
Componente Mappa del sito
Un componente della mappa del sito reattivo progettato in modalità oscura utilizzando Tailwind CSS.
Neumorphic_Industrial_Sitemap
Un componente reattivo della mappa del sito neumorfica per aziende industriali e manifatturiere, caratterizzato da una combinazione di colori monocromatica e supporto per la modalità scura. Gli elementi sembrano essere estrusi dallo sfondo utilizzando ombre sottili.