Componenti Mappa del sito Componente Mappa del sito

Componente Mappa del sito

Un componente della mappa del sito progettato con i principi di Material Design utilizzando Tailwind CSS, con layout reattivi, animazioni e supporto per temi scuri.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Site Map</h2>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow">      <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 1</h3>      <ul class="mt-2">        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">About Us</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Services</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Contact</a></li>      </ul>    </div>    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow">      <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 2</h3>      <ul class="mt-2">        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Blog</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Pricing</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Testimonials</a></li>      </ul>    </div>    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow">      <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 3</h3>      <ul class="mt-2">        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">FAQs</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Support</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Privacy Policy</a></li>      </ul>    </div>  </div>  <div class="mt-8">    <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Team</h3>    <div class="flex space-x-4 mt-2">      <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow">        <img src="https://picsum.photos/seed/pic1/100/100" alt="Avatar" class="rounded-full">      </div>      <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow">        <img src="https://picsum.photos/seed/pic2/100/100" alt="Avatar" class="rounded-full">      </div>      <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow">        <img src="https://picsum.photos/seed/pic3/100/100" alt="Avatar" class="rounded-full">      </div>    </div>  </div></div>

Componenti correlati

Componente Mappa del sito

Un componente complesso e reattivo della mappa del sito con uno stile aziendale/professionale e una combinazione di colori della terra, adatto per siti Web aziendali. Include il supporto per la modalità oscura.

Aperto

Componente Mappa del sito

Un componente della mappa del sito retrò/vintage progettato per le interfacce dei social media, utilizzando una combinazione di colori monocromatica. Presenta un layout semplice con un tema scuro per una migliore leggibilità e un aspetto estetico.

Aperto

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.

Aperto