Composant de plan du site
Un composant de sitemap simple et réactif pour les sites de commerce électronique avec des couleurs vives et des micro-interactions, et une prise en charge du mode sombre.
HTML Code
<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white dark:bg-gradient-to-r dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 py-12 px-6">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-8">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">Shop</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">All Products</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Categories</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Sale Items</a></li>
</ul>
</div>
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">Customer Service</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">Contact Us</a></li>
<li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Shipping Information</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Returns & Exchanges</a></li>
</ul>
</div>
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">About Us</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">Our Story</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Careers</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Terms of Service</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Privacy Policy</a></li>
</ul>
</div>
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">Follow Us</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">Facebook</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Instagram</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Twitter</a></li>
</ul>
</div>
</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 plan de site complexe et réactif avec un style d’entreprise/professionnel et une palette de couleurs de terre, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
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.