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

8 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

518
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

264
Active Beauty Main Page

Author:
Maxim

10 months ago

1.1k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.7k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Author:
Pagedone

1 year ago

2.1k
Simple tailwind footer
Simple tailwind footer with newsletter

Author:
Laurits

3 years ago

10.3k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.5k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components