Footer blue theme

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

Footer

Author Leon Bachmann

Tailwind v3.4 14.3k 9

Fork Fullscreen

<footer class="mt-20 xl:mt-32 mx-auto w-full relative text-center bg-blue-600 text-white">
    <div class="px-6 py-8 md:py-14 xl:pt-20 xl:pb-12">
        <h2 class="font-bold text-3xl xl:text-4xl leading-snug">
            Ready to get your productivity back?<br>Start your free trial today.
        </h2>
        <a class="mt-8 xl:mt-12 px-12 py-5 text-lg font-medium leading-tight inline-block bg-blue-800 rounded-full shadow-xl border border-transparent hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-sky-999 focus:ring-sky-500"
            href="#">Get
            started</a>
        <div class="mt-14 xl:mt-20">
            <nav class="flex flex-wrap justify-center text-lg font-medium">
                <div class="px-5 py-2"><a href="#">Contact</a></div>
                <div class="px-5 py-2"><a href="#">Pricing</a></div>
                <div class="px-5 py-2"><a href="#">Privacy</a></div>
                <div class="px-5 py-2"><a href="#">Terms</a></div>
                <div class="px-5 py-2"><a href="#">Twitter</a></div>
            </nav>
            <p class="mt-7 text-base">© 2023 XYZ, LLC</p>
        </div>
    </div>
</footer>

Related Examples

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

Prem..

4 years ago

19.3k
Footer with social icons

Mr Robot

4 years ago

17.4k
Responsive footer
Footer section with icons

Prajwal Hallale

3 years ago

12.7k
Simple footer

Piet Vriend

3 years ago

16.5k
Basic footer

Mr Robot

3 years ago

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

Pagedone

2 years ago

3.4k
Footer

Abdul Baset Bappy

1 year ago

1k
Footer

Ivan K

2 years ago

3.9k
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Pagedone

2 years ago

3.4k
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

SHARIFUL ISLAM

1 year ago

1.5k
Standard footer
You can use this example for five column footer with social media accounts, sitemap links, copyright notice and brand logo.

Pagedone

2 years ago

3.5k
Simple centered footer
Use this example for simple footer with horizontal sitemap links, brand logo, and social media accounts.This example can also be used as a tailwind sticky footer.

Pagedone

2 years ago

3.5k