Composant de plan du site
Composant de plan de site réactif avec micro-interactions, schéma de couleurs monochromatiques, conception complexe, prise en charge du thème sombre et CSS Tailwind.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold mb-8 text-center">Site Map</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Section 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 1</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.3</a>
</li>
</ul>
</div>
<!-- Section 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 2</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.3</a>
</li>
</ul>
</div>
<!-- Section 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 3</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.3</a>
</li>
</ul>
</div>
<!-- Section 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 4</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.3</a>
</li>
</ul>
</div>
<!-- Section 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 5</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.3</a>
</li>
</ul>
</div>
<!-- Section 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 6</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Composants associés
Composant Plan du site de médias sociaux
Un composant de sitemap simple et réactif pour les interfaces de médias sociaux avec des tons sépia/bruns et la prise en charge du mode sombre, avec des micro-interactions subtiles au survol.
Composant de plan du site
Un composant de plan de site réactif conçu en mode sombre à l’aide de Tailwind CSS.
Composant de plan du site
Un composant de plan de site conçu selon les principes de conception matérielle à l’aide de Tailwind CSS, avec des mises en page réactives, des animations et la prise en charge des thèmes sombres.