Composant de plan du site
Un composant de plan de site neumorphe avec un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 1</h3>
<ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 1</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 2</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 2</h3>
<ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link A</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link B</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link C</a></li>
</ul>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 3</h3>
<ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page X</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Y</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Z</a></li>
</ul>
</div>
</div>
</div>Composants associés
Composant de plan du site
Un composant de plan de site réactif conçu pour le mode sombre utilisant des couleurs pastel, adapté aux tableaux de bord.
Composant de plan du site
Un composant de plan de site réactif conçu selon les principes de Material Design et optimisé pour le commerce électronique, avec des couleurs pastel et la prise en charge du mode sombre.
Retro_Healthcare_Sitemap_Component
Un composant de sitemap simple et réactif avec une esthétique rétro/vintage, une palette de couleurs analogue, adapté aux applications de santé, y compris la prise en charge du mode sombre.