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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-gray-700 transition duration-300">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Home</h3>
<p class="text-gray-600 dark:text-gray-400">Welcome to our website!</p>
<img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h3>
<p class="text-gray-600 dark:text-gray-400">Learn more about our team.</p>
<img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Services</h3>
<p class="text-gray-600 dark:text-gray-400">What we offer to our clients.</p>
<img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact</h3>
<p class="text-gray-600 dark:text-gray-400">Reach out to us anytime.</p>
<img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Blog</h3>
<p class="text-gray-600 dark:text-gray-400">Read our latest articles.</p>
<img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">FAQ</h3>
<p class="text-gray-600 dark:text-gray-400">Find answers to your questions.</p>
<img src="https://picsum.photos/200/100?random=6" alt="FAQ Image" class="mt-2 rounded-md">
</div>
</div>
</div>Composants associés
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.
Composant de plan du site
Un composant de sitemap de style Material Design pour les interfaces de médias sociaux, avec une prise en charge de la réactivité et du mode sombre à l’aide de Tailwind CSS. Intègre des tons de terre et une complexité moyenne pour les plateformes de réseaux sociaux.
Composant de plan du site
Un composant de plan de site réactif conçu avec glassmorphism, avec un effet translucide et un flou semblable à du verre dépoli pour un portfolio présentant des travaux ou des produits. Il prend en charge un thème sombre et utilise des couleurs complémentaires tout en conservant une complexité modérée.