Simple tailwind footer

Simple tailwind footer with newsletter

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

Footer

Author Laurits

Tailwind v3.4 11k 11

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

Prem..

4 years ago

19.3k
Simple footer

Piet Vriend

3 years ago

16.5k
Responsive footer
Footer section with icons

Prajwal Hallale

3 years ago

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

Manuela Bianka

4 years ago

17.3k
Minimal responsive footer

Mr Robot

3 years ago

12.3k
Footer with social media buttons

Sophia Baker

3 years ago

15k
Footer with social icons

Mr Robot

4 years ago

17.5k
Footer - Htmlwind
Simple centerd footer

Htmlwind

1 year ago

1.1k
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.6k
Multi-column Footer
A clean, modern, and fully responsive corporate footer built with Tailwind CSS. It features a multi-column layout, mobile-friendly accordion navigation, company information, contact details, social media links, subtle hover animations, and a smooth scroll-to-top button. Designed with a professional aesthetic, this footer is perfect for corporate, SaaS, startup, agency, legal, finance, and business websites.

JUGENDRA GANGWAR

3 months ago

257
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Footer
responsive footer

Aman kumar

2 years ago

9.5k