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.
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 della mappa del sito reattivo progettato per la modalità oscura utilizzando colori pastello, adatto per le dashboard.
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.
Componente Mappa del sito
Un componente della mappa del sito reattivo progettato in modalità oscura utilizzando Tailwind CSS.