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 complexe et réactif avec un style d’entreprise/professionnel et une palette de couleurs de terre, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
Composant de plan du site
Composant de plan de site réactif avec prise en charge du mode sombre pour le commerce électronique. Utilise Tailwind CSS pour le coiffage. Suit une palette de couleurs analogue. Images de picsum.photos.
Composant de plan du site
Un composant de plan de site réactif conçu dans un style brutaliste avec un thème sombre pour les sites Web d’entreprise, intégrant des fonctionnalités interactives.