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 sitemap simple et réactif pour les sites de commerce électronique avec des couleurs vives et des micro-interactions, et une prise en charge du mode sombre.
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.
Composant de plan du site
Un composant de plan de site réactif conçu selon les principes de Material Design, avec des mises en page basées sur une grille, des ombres et la prise en charge du mode sombre.