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

12.9k

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

2 years ago

16.8k
Footer with social icons

Author:
Mr Robot

2 years ago

14.8k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.3k
Simple footer

Author:
Piet Vriend

2 years ago

15.1k
Basic footer

Author:
Mr Robot

2 years ago

14k
Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Author:
Maxim

5 months ago

638
Newsletter with address location
Use this example to first show brand logo card, then show address locations of your company, a newsletter sign-up form.

Author:
Pagedone

1 year ago

2.1k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

4 months ago

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

Author:
Pagedone

1 year ago

2.4k
Footer - Modern minimal style
clean and uncluttered, following a minimalist approach

Author:
Nikita

1 year ago

3.8k
Horizontal footer
Use this horizontal footer tailwind css example if you want horizontal footer layout side by side, which includes sitemap links, brand logo and social media accounts.

Author:
Pagedone

1 year ago

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

Author:
Pagedone

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components