Neumorfismo Vibrante Componente de mapa del sitio
Un componente de mapa del sitio simple y receptivo diseñado con un estilo neumórfico y un esquema de colores vibrantes, adecuado para documentación o sitios wiki. Incluye soporte para modo oscuro.
Código 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>Componentes relacionados
Neumorphic_Industrial_Sitemap
Un componente de mapa de sitio neumórfico receptivo para empresas industriales y manufactureras, con un esquema de color monocromático y soporte para modo oscuro. Los elementos parecen sobresalir del fondo mediante sombras sutiles.
Componente de mapa del sitio
Un componente de mapa del sitio diseñado en un estilo brutalista con un tema oscuro, ideal para sitios web comerciales profesionales. Presenta un diseño audaz con elementos interactivos y de alto contraste.
Componente de mapa del sitio
Un componente de mapa del sitio diseñado con los principios de Material Design utilizando Tailwind CSS, con diseños responsivos, animaciones y compatibilidad con temas oscuros.