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.
Codice HTML
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">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-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Home</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Us</h3>
<img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Services</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Contact</h3>
<img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Blog</h3>
<img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Portfolio</h3>
<img src="https://picsum.photos/200/100?random=6" alt="Portfolio Image" class="rounded-lg mt-2">
</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 della mappa del sito progettato in stile brutalismo con un tema scuro, ideale per siti Web aziendali professionali. Presenta un layout audace con contrasto elevato ed elementi interattivi.
Componente Mappa del sito
Componente Mappa del sito con design minimalista/piatto, effetti reattivi e supporto per temi scuri.