Basic footer

Basic footer with subscribe to the newsletter section

This tailwind example is contributed by Mr Robot, on 01-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Footer

Author Mr Robot

Tailwind v3.4 10.1k 15

Fork Fullscreen

<div class="bg-gray-100">
    <div class="max-w-screen-xl py-10 px-4 sm:px-6 text-gray-800 sm:flex justify-between mx-auto">
        <div class="p-5 sm:w-8/12">
            <h3 class="font-bold text-3xl text-indigo-600 mb-4">Componentity</h3>

<div class="flex text-gray-500 uppercase text-sm">
                <a href="#" class="mr-2 hover:text-indigo-600">Home</a>
                <a href="#" class="mr-2 hover:text-indigo-600">About Us</a>
                <a href="#" class="mr-2 hover:text-indigo-600">Contact Us</a>
                <a href="#" class="mr-2 hover:text-indigo-600">Support Us</a>
            </div>

</div>
        <div class="p-5 sm:w-4/12">
            <h3 class="font-medium text-lg text-indigo-600 mb-4">Subscribe to our Newsletter</h3>
            <form class="mt-4">
                <input class="border rounded w-full px-4 py-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="email" placeholder="username@email.com">
            </form>
        </div>
    </div>
    <div class="flex py-5 m-auto text-gray-800 text-sm flex-col items-center border-t max-w-screen-xl">
        <p>© Copyright 2020. All Rights Reserved.</p>
    </div>
</div>

Related Examples

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

Prem..

4 years ago

19.4k
Simple footer

Piet Vriend

3 years ago

16.5k
Footer with social media buttons

Sophia Baker

3 years ago

15k
Basic footer

Mr Robot

3 years ago

15.5k
footer
footer

Anonymous

1 year ago

2.2k
Footer with social icons

Mr Robot

4 years ago

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

Pagedone

2 years ago

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

Ayyamperumal S

1 year ago

2.7k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.7k
Four columns with subscribe form
Use this example for four column footer with subscribe form, brand logo, sitemap links and social media accounts.

Pagedone

2 years ago

2.7k
Horizontal footer
Use this horizontal footer tailwind css example if you want horizontal footer layout side by side, which includes sitemap links, brand logo and social media accounts.

Pagedone

2 years ago

3.3k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k