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
Un composant de plan de site neumorphe avec un design réactif et une prise en charge du mode sombre.
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.
Composant de plan du site
Un composant complexe de plan de site mettant en œuvre un style de conception skeuomorphism avec des couleurs de terre, prenant en charge un thème sombre. Conçu à des fins de blog/contenu avec des éléments interactifs, à l’aide de Tailwind CSS.