Home
SHARIFUL ISLAM
Responsive eCommerce Footer Component with Tailwind CSS

Responsive eCommerce Footer Component with Tailwind CSS

A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

This tailwind example is contributed by SHARIFUL ISLAM, on 22-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Footer eCommerce Landing Page

Author SHARIFUL ISLAM

1.2k

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen">
<footer class="bg-white text-gray-700 border-t border-gray-200">
  <div class="container mx-auto px-6 py-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
      
      <div>
        <h2 class="text-xl font-semibold flex items-center space-x-2">
          <span class="text-blue-600 text-2xl">ES</span> <span>BAZAR</span>
        </h2>
        <p class="mt-2 text-sm text-gray-600">
          Lorem ipsum dolor sit amet consectetur. Imperdiet aliquet faucibus malesuada vitae.
        </p>
        <p class="mt-2 text-sm text-gray-600">
          <span class="font-semibold">(219) 555-0114</span>
        </p>
        
        <div class="flex space-x-3 mt-3">
          <a href="#" class="text-blue-600"><i class="fab fa-facebook"></i></a>
          <a href="#" class="text-red-600"><i class="fab fa-reddit"></i></a>
          <a href="#" class="text-green-500"><i class="fab fa-whatsapp"></i></a>
          <a href="#" class="text-pink-600"><i class="fab fa-pinterest"></i></a>
        </div>
      </div>
      
      
      <div>
        <h3 class="font-semibold mb-2">My Account</h3>
        <ul class="text-sm 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">Shopping Cart</a></li>
          <li><a href="#" class="hover:text-blue-600">Wishlist</a></li>
        </ul>
      </div>
      
      
      <div>
        <h3 class="font-semibold mb-2">Helps</h3>
        <ul class="text-sm space-y-2">
          <li><a href="#" class="hover:text-blue-600">Contact</a></li>
          <li><a href="#" class="hover:text-blue-600">FAQs</a></li>
          <li><a href="#" class="hover:text-blue-600">Terms & Condition</a></li>
          <li><a href="#" class="hover:text-blue-600">Privacy Policy</a></li>
        </ul>
      </div>
      
      
      <div>
        <h3 class="font-semibold mb-2">Categories</h3>
        <ul class="text-sm space-y-2">
          <li><a href="#" class="hover:text-blue-600">Printers</a></li>
          <li><a href="#" class="hover:text-blue-600">Cartridge</a></li>
          <li><a href="#" class="hover:text-blue-600">Ink</a></li>
        </ul>
      </div>
    </div>
    
    
    <div class="flex flex-col md:flex-row justify-between items-center mt-6">
      <div class="flex space-x-2">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-v52tLnvL3FEjfxjPvZWbvUMYvVUtAm9R6A&s" alt="Google Play" class="h-10">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJgk5tpxJC_1CAnsXwo2VvBGyQGI-o5c1PJw&s" alt="App Store" class="h-10">
      </div>
      <div class="flex space-x-2 mt-4 md:mt-0">
        <img src="https://www.logo.wine/a/logo/Apple_Pay/Apple_Pay-White-Dark-Background-Logo.wine.svg" alt="Apple Pay" class="h-[30px] w-10 rounded-md">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSynWEtLag--sQ4XlfTwHh9_DAnfcglW7C3iw&s" alt="Visa" class="h-[30px] w-10 rounded-md">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6mJsEDg1aR_JCFb3ohk2nCxjgSvkWnpmlKg&s" alt="Mastercard" class="h-[30px] w-10 rounded-md">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQveKfGcJ1tSEY8bLg52DxvVrFDJXmxXJgv1Q&s" alt="discover" class="h-[30px] w-10 rounded-md">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDS0zyuJdI4e7E1VGaNDAVtRn3fGTzr0PBOA&s" alt="Secure Payment" class="h-[30px] w-10 rounded-md">
      </div>
    </div>
    
    
    <div class="text-center text-sm text-gray-500 mt-6 border-t pt-4">
      ExpertSquad © 2025. All Rights Reserved.
    </div>
  </div>
</footer>
</div>

Related Examples

Pre-footer Newsletter
Use this example with a Newsletter section before the footer, a sitemap, the logo of your brand and social media accounts.

Author:
Pagedone

1 year ago

2.9k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

1 year ago

2k
Footer for blog
https://github.com/tailwindow/component

Author:
Prem..

3 years ago

18.6k
Hero Beer

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

4k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

12k
Animated Coming Soon Page 1
animated coming soon landing page

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.2k
template hero

Author:
Raul antonio de la cruz hernandez

2 months ago

407
super cube
complex landing page for super cube created by salvator

Author:
Baraka Salvator

10 months ago

1k
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Author:
Code huit

2 years ago

14.2k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

407

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components