Home
Mr Robot
Minimal responsive footer

Minimal responsive footer

This tailwind example is contributed by Mr Robot, on 10-Dec-2022. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Mr Robot

10.8k

Fork Fullscreen

<div class="bg-gray-100">
    <div class="max-w-screen-xl mx-auto px-4 sm:px-6  text-gray-800 flex flex-wrap justify-center flex justify-between">
        <div class="p-5">
            <div class="text-xs uppercase text-gray-500 font-medium">Home</div>
            <a class="my-3 block" href="/#">Services <span class="text-teal-600 text-xs p-1"></span>
            </a>
            <a class="my-3 block" href="/#">Products <span class="text-teal-600 text-xs p-1"></span>
            </a>
            <a class="my-3 block" href="/#">About Us <span class="text-teal-600 text-xs p-1"></span>
            </a>
            <a class="my-3 block" href="/#">Pricing <span class="text-teal-600 text-xs p-1"></span>
            </a>
            <a class="my-3 block" href="/#">Partners <span class="text-teal-600 text-xs p-1">New</span>
            </a>
        </div>
        <div class="p-5">
            <div class="text-xs uppercase text-gray-500 font-medium">Resources</div>

<a class="my-3 block" href="/#">Documentation <span class="text-teal-600 text-xs p-1"></span>
            </a>
            <a class="my-3 block" href="/#">Tutorials <span class="text-teal-600 text-xs p-1"></span>
            </a>
            <a class="my-3 block" href="/#">Support <span class="text-teal-600 text-xs p-1">New</span>
            </a>
        </div>
        <div class="p-5">
            <div class="text-xs uppercase text-gray-500 font-medium">Support</div>

<a class="my-3 block" href="/#">Help Center <span class="text-teal-600 text-xs p-1"></span>
            </a>
            <a class="my-3 block" href="/#">Privacy Policy <span class="text-teal-600 text-xs p-1"></span>
            </a>
            <a class="my-3 block" href="/#">Conditions <span class="text-teal-600 text-xs p-1"></span>
            </a>
        </div>
        <div class="p-5">
            <div class="text-xs uppercase text-gray-500 font-medium">Contact us</div>

<a class="my-3 block" href="/#">XXX XXXX, Floor 4 San Francisco, CA
                <span class="text-teal-600 text-xs p-1"></span>
            </a>

<a class="my-3 block" href="/#">contact@company.com
                <span class="text-teal-600 text-xs p-1"></span>
            </a>
        </div>
    </div>
</div>

Related Examples

Basic footer

Author:
Mr Robot

2 years ago

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

Author:
Prem..

2 years ago

15.6k
Footer with 3 sections

Author:
Mr Robot

2 years ago

11.9k
Simple footer

Author:
Piet Vriend

2 years ago

14.4k
Simple tailwind footer
Simple tailwind footer with newsletter

Author:
Laurits

2 years ago

9.4k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

2 years ago

10.1k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.1k
Footer blue theme

Author:
Leon Bachmann

2 years ago

12.7k
Footer with background
Apply background color to your footer to provide immense look of footer area.

Author:
Pagedone

10 months ago

1.5k
subscribe form in Footer
You can use following subscribe form in your tailwind footer section beside contact information such as email address, phone numbers etc and You can also shows community counts.

Author:
Pagedone

10 months ago

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

10 months ago

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

Author:
Nikita

1 year ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components