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

10.9k

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

2 years ago

15.4k
Footer with social icons

Author:
Mr Robot

2 years ago

15k
Sticky bottom footer

Author:
Isabella Kowalski

2 years ago

10.2k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

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

Author:
Manuela Bianka

2 years ago

15.5k
Footer with 3 sections

Author:
Mr Robot

2 years ago

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

Author:
Prem..

3 years ago

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

1.7k
Footer
responsive footer

Author:
Aman kumar

1 year ago

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

Author:
Nikita

1 year ago

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

6 months ago

1.4k
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

5 months ago

793

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components