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.
Codice HTML
<div class="min-h-screen bg-gray-900 dark:bg-gray-800 flex flex-col items-center justify-center p-6">
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700 p-8 mb-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Site Map</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 1.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=1" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 2.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=2" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 3.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=3" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 4</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 4.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=4" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 5</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 5.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=5" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 6</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 6.</p>
</div>
</div>
</div>
<footer class="text-center text-gray-600 dark:text-gray-400">
<p class="text-sm">© 2023 Your Name. All Rights Reserved.</p>
<p>Follow me on <a href="#" class="text-green-500 hover:underline">LinkedIn</a> | <a href="#" class="text-blue-500 hover:underline">Twitter</a></p>
</footer>
</div>Componenti correlati
Componente Mappa del sito
Un complesso componente della mappa del sito che implementa lo stile di progettazione scheumorfismo con una combinazione di colori dei toni della terra, supportando un tema scuro. Progettato per scopi di blog/contenuti con elementi interattivi, utilizzando Tailwind CSS.
Componente Mappa del sito
Un componente sitemap reattivo per piattaforme di intrattenimento/media con un'interfaccia utente scura e una combinazione di colori dei toni della terra, con più sezioni e un piè di pagina, che supporta la modalità scura.
Neon_Glow_Sports_Sitemap_Component
Un componente sitemap semplice e reattivo con effetti neon/bagliori e colori ad alto contrasto, su misura per applicazioni sportive/fitness. Include il supporto per la modalità oscura.