Footer

Footer with responsive desing

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Rajesh Maheshwari

1.1k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<body class="bg-black flex flex-col min-h-screen">

<footer class="bg-white shadow-lg mt-auto">
        <div class="max-w-7xl mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            
            
            <div>
                <h3 class="text-xl font-semibold text-gray-800">Company</h3>
                <p class="text-gray-500 mt-3">Delivering quality products with a seamless shopping experience.</p>
                <p class="text-gray-500 mt-2">© 2024 All rights reserved.</p>
            </div>

<div>
                <h3 class="text-xl font-semibold text-gray-800">Quick Links</h3>
                <ul class="mt-3 space-y-2">
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Home</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Shop</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">About Us</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Contact</a></li>
                </ul>
            </div>

<div>
                <h3 class="text-xl font-semibold text-gray-800">Customer Service</h3>
                <ul class="mt-3 space-y-2">
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">FAQs</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Shipping & Returns</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Privacy Policy</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Terms & Conditions</a></li>
                </ul>
            </div>

<div>
                <h3 class="text-xl font-semibold text-gray-800">Stay Updated</h3>
                <p class="text-gray-500 mt-3">Subscribe to our newsletter for exclusive deals and updates.</p>
                <div class="mt-4 flex">
                    <input type="email" placeholder="Enter your email" class="w-full px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-1">
                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 rounded-r-lg transition">
                        Subscribe
                    </button>
                </div>
            </div>
            
        </div>
        
        
        <div class="border-t border-gray-200 mt-8 py-4 text-center text-gray-500 text-sm">
            Made with ❤️ by Rajesh Maheshwari       </div>
    </footer>

</body>
</html>

Related Examples

Footer with gallery
Use this example if you want to add gallery of images into your footer with brand logo, sitemap links and copyright notice.

Author:
Pagedone

1 year ago

2.4k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

11 months ago

3.7k
Footer with background
Apply background color to your footer to provide immense look of footer area.

Author:
Pagedone

1 year ago

2.7k
Footer with App buttons
This example can be used if you want add your app buttons of store for download with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

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

3 months ago

415
Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

Author:
KULDEEP

5 months ago

880
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

6 months ago

849
footer
footer

Author:
Anonymous

7 months ago

1.6k
Five columns with subscribe button
This example of tailwind css footer can be used if you want five columns in your footer with brand logo, sitemap links, description and social media account with additional subscibe button to connect with your website.

Author:
Pagedone

1 year ago

2.5k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

9 months ago

1.1k
Basic footer
Basic footer with subscribe to the newsletter section

Author:
Mr Robot

2 years ago

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

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components