Footer

This tailwind example is contributed by Maxim, on 22-Mar-2025. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 1.8k 6

<footer class="bg-black text-white pt-16 pb-8 px-6 md:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-12 lg:grid-cols-12 gap-y-12 md:gap-x-8">
            <div class="md:col-span-4 lg:col-span-6 max-w-md">
                <h3 class="text-2xl font-normal mb-6 leading-tight">Keep up to date with our quarterly newsletter,
                    "You've got mail."</h3>
                <div class="mt-4 space-y-4">
                    <input type="email" placeholder="Enter email address..." class="newsletter-input w-full px-4 py-3 bg-zinc-900 rounded text-white border border-zinc-800 focus:outline-none focus:border-zinc-700">
                    <button class="bg-white text-black px-6 py-2.5 rounded-full flex items-center font-medium hover:bg-gray-200 transition-colors">
                            Subscribe
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                </div>
            </div>
            <div class="hidden md:block md:col-span-1 lg:hidden"></div>
            <div
                class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 col-span-1 md:col-span-7 lg:col-span-6 gap-y-12 sm:gap-x-8 md:gap-x-8 lg:gap-x-10">
                <div>
                    <h3 class="text-sm font-normal uppercase tracking-wide text-gray-400 mb-5">Get in Touch</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Start a Project</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Join the Team</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Press & Media</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Drop Us a Note</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-sm font-normal uppercase tracking-wide text-gray-400 mb-5">See More</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Home</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Work</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Services</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Latest</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">About</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Careers</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Contact</a></li>
                    </ul>
                </div>
                <div class="sm:col-span-2 md:col-span-1 lg:col-span-1">
                    <h3 class="text-sm font-normal uppercase tracking-wide text-gray-400 mb-5">Follow Us</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Instagram</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">LinkedIn</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Twitter</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="mt-16 pt-6 border-t border-zinc-800">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="flex space-x-6 mb-4 md:mb-0">
                    <a href="#" class="text-xs text-gray-500 hover:text-gray-300">Sitemap</a>
                    <a href="#" class="text-xs text-gray-500 hover:text-gray-300">Privacy Policy</a>
                </div>
                <div class="text-xs text-gray-500">
                    © 2025, Site. All Rights Reserved.
                </div>
            </div>
        </div>
    </div>
</footer>

Related Examples

Responsive footer
Standard footer format

Emre Yılmaz

2 years ago

3.3k
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Pagedone

2 years ago

3.4k
Minimalist iOS 26 Foote
Minimalist iOS 26 Foote

Omer fils ELENGA

10 months ago

526
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Pagedone

2 years ago

3.4k
Simple footer

threehymns

2 years ago

5.5k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

ABDO-SY

1 year ago

1.2k
Footer
A simple footer with link adjustment for smartphones

Matti

1 year ago

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

Pagedone

2 years ago

2.8k
Footer
Simple Dark footer

KULDEEP

1 year ago

1.4k
Responsive Footer

ariaw

1 year ago

3.1k
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.

zobaidul kaziex

2 years ago

3.6k
Footer (Tailwind UI)

Gopi Yadav

3 years ago

12.9k