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

Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.6k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

2.1k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

1 year ago

2k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

7 months ago

1.8k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Author:
Homayoun

1 month ago

437
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

1 month ago

229
Basic landing page template

Author:
Anonymous

2 years ago

11.9k
Footer with 3 sections

Author:
Mr Robot

3 years ago

13.2k
Get it on Google play / App store section

Author:
Rajesh kulkarni

3 years ago

10.2k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

6 months ago

494
Call to Action
CTA with Dark and Shadow colors

Author:
KULDEEP

7 months ago

1.1k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

11 months ago

989

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components