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 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 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.
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.