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 de style rétro/vintage avec des effets réactifs et une prise en charge du thème sombre.
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.
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.