Home
Laurits
Simple tailwind footer

Simple tailwind footer

Simple tailwind footer with newsletter

This tailwind example is contributed by Laurits, on 07-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Laurits

10k

Fork Fullscreen

<footer class="p-4 mt-16 grid md:grid-cols-2 gap-12 xl:col-span-2 xl:mt-0">
    <div class="md:grid md:grid-cols-2 md:gap-8">
        <div>
            <h3 class="text-sm font-semibold leading-6 text-gray-900">Links</h3>
            <ul role="list" class="mt-6 space-y-4">
                <li><a class="text-sm leading-6 text-gray-600 hover:text-gray-900" href="#">Homepage</a></li>
                <li><a class="text-sm leading-6 text-gray-600 hover:text-gray-900" href="#">FAQ</a></li>
                <li><a class="text-sm leading-6 text-gray-600 hover:text-gray-900" href="#">Sign up</a></li>
            </ul>
        </div>
        <div class="mt-10 md:mt-0">
            <h3 class="text-sm font-semibold leading-6 text-gray-900">Support</h3>
            <ul role="list" class="mt-6 space-y-4">
                <li>
                    <a class="text-sm leading-6 text-gray-600 hover:text-gray-900" href="#">Terms and
                        Conditions
                    </a>
                </li>
                <li>
                    <a class="text-sm leading-6 text-gray-600 hover:text-gray-900" href="#">Privacy
                        Policy
                    </a>
                </li>
                <li>
                    <a class="text-sm leading-6 text-gray-600 hover:text-gray-900" href="#">Legal Notice

</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="">
        <h3 class="text-sm font-semibold leading-6 text-gray-900">Subscribe to our Newsletter</h3>
        <p class="mt-2 text-sm leading-6 text-gray-600">We will inform you about promotions and exclusive offers as well
            as new teaching materials.
        </p>
        <form class="mt-6 sm:flex sm:max-w-md">
            <label for="email-address" class="sr-only"> Email address</label>
            <input type="email" name="email" id="email-address" autocomplete="email" required="" class="w-full min-w-0 border appearance-none rounded-md border-gray-300 bg-white px-2  text-base leading-7 text-gray-900 placeholder-gray-400 shadow-sm focus:border-indigo-600 focus:ring-indigo-600 sm:w-64 sm:text-sm sm:leading-6 xl:w-full" placeholder="E-Mail Address">
            <div class="mt-4 rounded-md sm:mt-0 sm:ml-4 sm:flex-shrink-0">
                <div class="flex justify-end">
                    <button class="inline-flex items-center justify-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none ring-2 ring-offset-2 ring-transparent ring-offset-transparent disabled:bg-gray-400 appearance-none text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-white w-full" type="submit">
                        <div class="relative">
                            <div class="">Subscribe</div>
                        </div>
                    </button>
                </div>
            </div>
        </form>
    </div>
</footer>

Related Examples

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

Author:
Prem..

3 years ago

17.3k
Simple footer

Author:
Piet Vriend

2 years ago

15.4k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.4k
Responsive Footer
source: https://kitwind.io/products/kometa/components/footers

Author:
Manuela Bianka

2 years ago

16k
Minimal responsive footer

Author:
Mr Robot

2 years ago

11.2k
Footer with images

Author:
Mr Robot

2 years ago

9.3k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

8 months ago

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

1 month ago

145
Newsletter Footer
Fully Responsive newsletter footer page

Author:
AKASH GANDHAR

1 year ago

1.8k
Footer blue theme

Author:
Leon Bachmann

2 years ago

13.2k
footer

Author:
isolde

1 year ago

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

Author:
Ayyamperumal S

5 months ago

824

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components