Home
Lukas Müller
Responsive footer

Responsive footer

This tailwind example is contributed by Lukas Müller, on 13-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Lukas Müller

11.4k

Fork Fullscreen

<footer class="bg-sky-400">
    <div class="mx-auto max-w-7xl py-8 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
        <nav class="-mx-5 -my-2 flex flex-wrap justify-center order-2" aria-label="Footer">
            <div class="px-5">
                <a href="#" class="text-base text-white hover:text-gray-200">Terms of Service</a>
            </div>

<div class="px-5">
                <a href="#" class="text-base text-white hover:text-gray-200">Privacy Policy</a>
            </div>
        </nav>
        <div class="mt-8 md:mb-8 flex justify-center space-x-6 md:order-3  ">
            <a href="#" class="text-white hover:text-gray-200">
                <span class="sr-only">Facebook</span>
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
                        clip-rule="evenodd" />
                </svg>
            </a>

<a href="#" class="text-white hover:text-gray-200">
                <span class="sr-only">Twitter</span>
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path
                        d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                </svg>
            </a>

<a href="#" class="text-white hover:text-gray-200">
                <span class="sr-only">GitHub</span>
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                        clip-rule="evenodd" />
                </svg>
            </a>
        </div>
        <div class="mt-8  md:order-1 md:mt-0 ">
            <p class="text-center text-base text-white">
                &copy; SvelteKit Blog App. MIT Licensed.
            </p>
        </div>
    </div>
</footer>

Related Examples

Simple footer

Author:
Piet Vriend

3 years ago

16.1k
Footer with social icons

Author:
Mr Robot

3 years ago

16.5k
Sticky bottom footer

Author:
Isabella Kowalski

3 years ago

10.9k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

3 years ago

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

Author:
Manuela Bianka

3 years ago

16.7k
Footer with 3 sections

Author:
Mr Robot

3 years ago

13.2k
Big footer with lots of links

Author:
Henrik R.

1 year ago

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

1 year ago

2.7k
Footer (Tailwind UI)

Author:
Gopi Yadav

3 years ago

12.5k
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

11 months ago

1.3k
Tailwind Footer with dark version
This example can be used if you are looking for four column footer in dark version with sitemap links, brand logo, and social media accounts.

Author:
Pagedone

1 year ago

3.6k
Responsive Website Footer
A modern and clean website footer component with sections for branding, navigation links, social media icons, and copyright text. Designed to be fully responsive and suitable for portfolios, business websites, and web applications.

Author:
Sudip chaudhary

2 months ago

235

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components