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

10.3k

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

18.2k
Simple footer

Author:
Piet Vriend

3 years ago

16k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

3 years ago

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

Author:
Manuela Bianka

3 years ago

16.5k
Minimal responsive footer

Author:
Mr Robot

3 years ago

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

6 months ago

979
beautifull footer
We create a Advance animated footer section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.4k
Basic footer
Simple footer with follow us section

Author:
Anonymous

1 year ago

2.1k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

3k
Minimalist iOS 26 Foote
Minimalist iOS 26 Foote

Author:
Omer fils ELENGA

1 month ago

53
Dark Footer with subscribe form
Use below exmaple of Tailwind CSS Dark Footer with Newsletter Subscription Form with brand logo and site links.

Author:
Pagedone

1 year ago

2.9k
Sticky bottom footer

Author:
Isabella Kowalski

3 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components