Componente Mappa del sito
Un componente della mappa del sito reattivo progettato in modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Site Map</h2>
<ul class="space-y-3">
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>Home</span>
</a>
</li>
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>About Us</span>
</a>
</li>
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>Services</span>
</a>
</li>
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>Contact</span>
</a>
</li>
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>Privacy Policy</span>
</a>
</li>
</ul>
<div class="mt-5">
<h3 class="text-xl font-semibold">Follow Us</h3>
<ul class="flex space-x-4 mt-2">
<li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
<li><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
<li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
</ul>
</div>
</div>
Componenti correlati
Neumorfismo Vibrante Componente Mappa del Sito
Un componente della mappa del sito semplice e reattivo, progettato con uno stile neumorfico e una combinazione di colori vivaci, adatto per la documentazione o i siti wiki. Include il supporto per la modalità oscura.
Componente Mappa del sito
Un componente della mappa del sito reattivo progettato secondo i principi di Material Design, con layout basati su griglia, ombre e supporto per la modalità scura.
Componente Mappa del sito
Un componente reattivo della mappa del sito progettato con glassmorphism, caratterizzato da un effetto traslucido smerigliato simile al vetro e sfocatura per un portfolio che mostra lavori o prodotti. Supporta un tema scuro e utilizza colori complementari pur mantenendo una complessità moderata.