Component:
Footer E-commerce Modern
Colors:
Description:
This carefully crafted Footer component is perfect for E-commerce landing pages, featuring a Modern design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@type: Footer
@industry: E-commerce
@style: Modern
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<footer class="w-full py-12 md:py-16 bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
<div class="space-y-6">
<div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-package h-8 w-8 text-orange-500">
<path d="m7.5 4.27 9 5.15"></path>
<path
d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z">
</path>
<path d="m3.3 7 8.7 5 8.7-5"></path>
<path d="M12 22V12"></path>
</svg>
<span class="text-2xl font-bold text-gray-900">StyleHub</span>
</div>
<p class="text-gray-600 text-base leading-relaxed">
Your destination for curated fashion and a seamless shopping experience. Discover quality, style, and convenience.
</p>
<div class="flex gap-4">
<a href="#" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-facebook h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</a>
<a href="#" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-instagram h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</a>
<a href="#" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
<a href="#" aria-label="YouTube"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-youtube h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17">
</path>
<path d="m10 15 5-3-5-3z"></path>
</svg>
</a>
</div>
</div>
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900">Quick Links</h3>
<ul class="space-y-3 text-gray-600">
<li><a href="#" class="hover:text-orange-500 transition-colors">Shop All</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">New Arrivals</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Best Sellers</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Sale</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Gift Cards</a></li>
</ul>
</div>
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900">Customer Service</h3>
<ul class="space-y-3 text-gray-600">
<li><a href="#" class="hover:text-orange-500 transition-colors">Contact Us</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">FAQ</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Shipping & Returns</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Order Tracking</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Size Guide</a></li>
</ul>
</div>
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900">Stay Connected</h3>
<p class="text-gray-600">Subscribe to our newsletter for exclusive offers and updates.</p>
<form class="flex gap-2">
<input class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex-grow border-gray-300 focus:border-orange-500 focus:ring-orange-500"
placeholder="Your email address" type="email">
<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs h-9 has-[>svg]:px-3 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-send h-5 w-5">
<path d="m22 2-7 20-4-9-9-4Z"></path>
<path d="M22 2 11 13"></path>
</svg>
<span class="sr-only">Subscribe</span>
</button>
</form>
<div class="text-gray-600">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-mail h-5 w-5 text-gray-500">
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
</svg>
<span>[email protected]</span>
</div>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-200 text-center text-gray-500 text-sm">
<p>© 2025 StyleHub. All rights reserved.</p>
<div class="flex justify-center gap-4 mt-2">
<a href="#" class="hover:text-orange-500 transition-colors">Privacy Policy</a>
|
<a href="#" class="hover:text-orange-500 transition-colors">Terms of Service</a>
</div>
</div>
</div>
</footer> This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page