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

11k

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.6k
Footer with social icons

Author:
Mr Robot

3 years ago

15.4k
Sticky bottom footer

Author:
Isabella Kowalski

2 years ago

10.3k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

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

Author:
Manuela Bianka

3 years ago

16.2k
Footer with 3 sections

Author:
Mr Robot

2 years ago

12.9k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.3k
Footer with social media buttons

Author:
Sophia Baker

2 years ago

13.4k
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

1 year ago

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

4 months ago

592
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

7 months ago

1.3k
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.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components