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

426

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

2 years ago

10.9k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

11 months ago

1.5k
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

4 months ago

865
Footer - Htmlwind
Simple centerd footer

Author:
Htmlwind

1 week ago

11
Crafting a Responsive Footer with TypeScript, and Tailwind CSS
This is a well-structured and comprehensive footer section that uses Tailwind CSS for styling and layout. Here’s a brief explanation of what each part does: Footer Container (<footer class="bg-gray-800">): The footer is wrapped in a <footer> element with a dark background using the bg-gray-800 class. The aria-labelledby="footer-heading" attribute is used for accessibility, linking the <footer> to the invisible heading (<h2 id="footer-heading" class="sr-only">Footer</h2>). Main Content Area: The content inside the footer is centered and spaced using utility classes like max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8. Footer Sections: The footer is divided into several sections using grid layouts (xl:grid xl:grid-cols-5 xl:gap-8), which organize content into columns. Each section (Solutions, Support, Company, Legal) contains a heading with a list of links. These links are styled with Tailwind classes for consistent spacing and hover effects (text-base text-gray-300 hover:text-white). Language & Currency Selector: This section provides dropdowns for selecting language and currency. Tailwind's form utilities (@tailwindcss/forms plugin) are used to style the select elements. Newsletter Subscription Form: A subscription form is provided with an email input and a submit button. The form is styled to be responsive, with focus states for accessibility (focus:ring-2 focus:ring-offset-2). Social Media Links: Social media icons (Facebook, Instagram, etc.) are included, each wrapped in a link with hover effects. Icons are created using SVGs, which are scalable and look sharp at any size. Final Section: The footer concludes with another grid layout, ensuring spacing and alignment for different screen sizes. Customization Tips: Colors: You can easily customize the colors using Tailwind's utility classes (e.g., bg-gray-800, text-gray-400) to match your design. Icons: Replace SVGs with the appropriate icons for your needs. You might use a different icon set or add more icons. Responsive Design: Tailwind's utility classes like sm:, md:, lg:, xl: ensure that the footer is responsive across devices. Adjust the layout or padding if needed. Additional Considerations: SEO: Ensure the links in the footer point to meaningful pages to improve SEO. Accessibility: Consider adding aria-labels to the form elements and social media links to enhance accessibility further. This footer is ready to be integrated into a Tailwind CSS-powered project, offering both aesthetic appeal and functional utility.

Author:
zobaidul kaziex

9 months ago

2.3k
footer
Footer with contact info, navigation, account links, and social media icons.

Author:
Yasmin Rodrigues

1 year ago

2.5k
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

1 year ago

1.7k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

1 month ago

234
Payment form (Alpine JS)

Author:
Mr Robot

2 years ago

9.6k
Payment Successful! Notification page

Author:
EliteAI Tools

5 months ago

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

Author:
Prem..

2 years ago

16.8k
Responsive Footer
This a full responsive footer made with tailwind

Author:
Pape Toulé Yade

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components