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
Un composant de sitemap simple et réactif pour les applications technologiques/SaaS avec une interface utilisateur en mode sombre et un accent de dégradé arc-en-ciel. Optimisé pour un minimum d’éléments et une navigation claire.
Neumorphic_Real_Estate_Sitemap_Component
Un composant de plan de site neumorphique simple et réactif pour les plateformes immobilières avec un schéma de couleurs arc-en-ciel dégradé et la prise en charge du mode sombre.
Neon_Glow_Sports_Sitemap_Component
Un composant de sitemap simple et réactif avec des effets de néon/lueur et des couleurs à contraste élevé, conçu pour les applications de sport/fitness. Inclut la prise en charge du mode sombre.