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

8.7k

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

2 years ago

14.1k
Simple footer

Author:
Piet Vriend

1 year ago

13.2k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

1 year ago

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

Author:
Manuela Bianka

2 years ago

13k
Minimal responsive footer

Author:
Mr Robot

1 year ago

10.1k
Newsletter form with Pre-footer CTA
Get started with this example with a CTA section before the footer, a sitemap links, the logo of your brand, a newsletter sign-up form, and the copyright notice.

Author:
Pagedone

6 months ago

1.1k
Centered footer with subscribe form
Use this example to center align everything in footer with brand logo, sitemap links and subscribe form.

Author:
Pagedone

6 months ago

368
Responsive footer

Author:
Lukas Müller

1 year ago

9.8k
Four columns with address location
You can use this Tailwind Footer example to first show address location of your company with brand logo next to sitemap links.

Author:
Pagedone

6 months ago

691
Simple Footer

Author:
Samuel Abera

2 weeks ago

312
Footer (Tailwind UI)

Author:
Gopi Yadav

1 year ago

10.8k
Basic footer
Basic footer with subscribe to the newsletter section

Author:
Mr Robot

1 year ago

8.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent