Neumorphisme Vibrant Plan du site Composant
Un composant de plan de site simple et réactif conçu avec un style neumorphique et une palette de couleurs vives, adapté à la documentation ou aux sites wiki. Inclut la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Neumorphic_Industrial_Sitemap
Un composant de plan de site neumorphique réactif pour les entreprises industrielles et manufacturières, doté d’une palette de couleurs monochromatiques et d’une prise en charge du mode sombre. Les éléments semblent s’extruder de l’arrière-plan à l’aide d’ombres subtiles.
Composant de plan du site
Un composant complexe de plan de site mettant en œuvre un style de conception skeuomorphism avec des couleurs de terre, prenant en charge un thème sombre. Conçu à des fins de blog/contenu avec des éléments interactifs, à l’aide de Tailwind CSS.
Composant de plan du site
Un composant de sitemap réactif avec une esthétique Material Design, une palette de couleurs pastel et la prise en charge du mode sombre, adapté aux plateformes de rencontres/sociales.