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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg"> <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">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"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 1</h3> <ul class="mt-2"> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">About Us</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Services</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Contact</a></li> </ul> </div> <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 2</h3> <ul class="mt-2"> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Blog</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Pricing</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Testimonials</a></li> </ul> </div> <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 3</h3> <ul class="mt-2"> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">FAQs</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Support</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Privacy Policy</a></li> </ul> </div> </div> <div class="mt-8"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Team</h3> <div class="flex space-x-4 mt-2"> <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow"> <img src="https://picsum.photos/seed/pic1/100/100" alt="Avatar" class="rounded-full"> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow"> <img src="https://picsum.photos/seed/pic2/100/100" alt="Avatar" class="rounded-full"> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow"> <img src="https://picsum.photos/seed/pic3/100/100" alt="Avatar" class="rounded-full"> </div> </div> </div></div>Composants associés
Composant de plan du site
Un composant de plan de site réactif conçu en mode sombre à l’aide de Tailwind CSS.
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.
Composant de plan du site
Un composant de plan de site de style 3D avec un design réactif et une prise en charge du mode sombre. Il comporte des éléments tridimensionnels pour plus de profondeur et d’engagement, en utilisant des images et des avatars aléatoires.