Composant de plan du site
Composant de plan de site réactif avec prise en charge du mode sombre pour le commerce électronique. Utilise Tailwind CSS pour le coiffage. Suit une palette de couleurs analogue. Images de picsum.photos.
HTML Code
<footer class="bg-gray-900 text-gray-300 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="text-lg font-semibold mb-4 text-blue-400">Shop</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-600">All Products</a></li>
<li><a href="#" class="hover:text-blue-600">Categories</a></li>
<li><a href="#" class="hover:text-blue-600">New Arrivals</a></li>
<li><a href="#" class="hover:text-blue-600">Best Sellers</a></li>
<li><a href="#" class="hover:text-blue-600">On Sale</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-blue-400">Account</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-600">My Account</a></li>
<li><a href="#" class="hover:text-blue-600">Order History</a></li>
<li><a href="#" class="hover:text-blue-600">Wishlist</a></li>
<li><a href="#" class="hover:text-blue-600">Track Order</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-blue-400">Information</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-600">About Us</a></li>
<li><a href="#" class="hover:text-blue-600">Contact Us</a></li>
<li><a href="#" class="hover:text-blue-600">Privacy Policy</a></li>
<li><a href="#" class="hover:text-blue-600">Terms of Service</a></li>
<li><a href="#" class="hover:text-blue-600">Shipping & Returns</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-blue-400">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="mt-6">
<h5 class="text-md font-semibold mb-3 text-blue-400">Subscribe to our Newsletter</h5>
<form class="flex">
<input type="email" placeholder="Enter your email" class="py-2 px-4 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-600 bg-gray-800 text-gray-200 w-full">
<button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600">Subscribe</button>
</form>
</div>
</div>
</div>
<hr class="my-8 border-gray-700">
<div class="text-center text-gray-500">
© 2023 Your E-commerce Store. All rights reserved.
</div>
</div>
</footer>Composants associés
Composant de plan du site
Un composant de plan de site simple et dynamique inspiré de la 3D pour les portfolios, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
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 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.