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

13k

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

17.2k
Footer with social icons

Author:
Mr Robot

2 years ago

15k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.4k
Simple footer

Author:
Piet Vriend

2 years ago

15.4k
Basic footer

Author:
Mr Robot

2 years ago

14.1k
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Author:
Pagedone

1 year ago

2.4k
Simple Footer 2

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

1.5k
Very simple footer

Author:
Arya

2 years ago

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

1 month ago

436
Basic footer
Basic footer with subscribe to the newsletter section

Author:
Mr Robot

2 years ago

9.3k
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

2 months ago

416
Simple footer

Author:
threehymns

1 year ago

5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components