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 carte de site neumorphique
Un composant de plan de site complexe et réactif conçu dans un style neumorphe avec des tons de bijoux, adapté aux sites Web gouvernementaux ou de services publics, y compris la prise en charge du mode sombre.
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.
Neumorphic_Real_Estate_Sitemap_Component
Un composant de plan de site neumorphique simple et réactif pour les plateformes immobilières avec un schéma de couleurs arc-en-ciel dégradé et la prise en charge du mode sombre.