Home
Leon Bachmann
Footer blue theme

Footer blue theme

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

Footer

Author Leon Bachmann

13.5k

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

Author:
Prem..

3 years ago

18.4k
Footer with social icons

Author:
Mr Robot

3 years ago

16.5k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

3 years ago

12.6k
Simple footer

Author:
Piet Vriend

3 years ago

16.1k
Basic footer

Author:
Mr Robot

3 years ago

14.9k
Simple footer

Author:
threehymns

2 years ago

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

8 months ago

1k
less is more
less is more by salvator

Author:
Baraka Salvator

8 months ago

1.1k
Horizontal footer with dark version
Use this example for simple horizontal layout of footer in dark version with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

3.4k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

4.1k
Footer
A simple footer with link adjustment for smartphones

Author:
Matti

1 year ago

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

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components