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 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 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.
Neumorphisme Vibrant Plan du site Composant
Un composant de plan de site simple et réactif conçu avec un style neumorphique et une palette de couleurs vives, adapté à la documentation ou aux sites wiki. Inclut la prise en charge du mode sombre.