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.
Codice HTML
<div class="min-h-screen bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4 sm:p-8 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl p-6 sm:p-10 transition-all duration-300 ease-in-out
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),2px_2px_8px_rgba(0,0,0,0.4),-2px_-2px_8px_rgba(40,40,40,0.4)]
shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,250,0.7),2px_2px_8px_rgba(150,150,250,0.3),-2px_-2px_8px_rgba(255,255,255,0.8)]">
<h2 class="text-3xl sm:text-4xl font-extrabold text-indigo-700 dark:text-purple-400 mb-8 sm:mb-12 text-center drop-shadow-lg">
Site Map
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
<!-- Category 1: Getting Started -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Getting Started</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Installation Guide</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Quick Start Tutorial</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Frequently Asked Questions</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">System Requirements</a></li>
</ul>
</div>
<!-- Category 2: Core Concepts -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Core Concepts</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Data Models</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Endpoints</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Authentication</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Error Handling</a></li>
</ul>
</div>
<!-- Category 3: Advanced Topics -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Advanced Topics</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Custom Integrations</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Performance Optimization</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Security Best Practices</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Migration Guides</a></li>
</ul>
</div>
<!-- Category 4: Resources -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Resources</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Reference</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Glossary of Terms</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Community Forum</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Support & Contact</a></li>
</ul>
</div>
<!-- Category 5: Release Notes -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Release Notes</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Latest Version</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Previous Versions</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Upcoming Features</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Bug Fixes</a></li>
</ul>
</div>
<!-- Category 6: Legal & Compliance -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Legal & Compliance</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Terms of Service</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Privacy Policy</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Cookie Policy</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">DMCA Policy</a></li>
</ul>
</div>
</div>
</div>
</div>Componenti correlati
Componente Mappa del sito - Finance Banking
Un componente sitemap semplice e reattivo per interfacce finanziarie/bancarie, caratterizzato da un'interfaccia utente in modalità scura con toni seppia/marrone. Ottimizzato per desktop, tablet e dispositivi mobili, con supporto completo della modalità scura.
Componente Mappa del sito
Un componente della mappa del sito reattivo progettato in stile brutalista con un tema scuro per siti Web aziendali/aziendali, che incorpora funzionalità interattive.
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.