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

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.5k
Footer for blog
https://github.com/tailwindow/component

Author:
Prem..

2 years ago

16.1k
Footer with 3 sections

Author:
Mr Robot

2 years ago

12.3k
Simple footer

Author:
Piet Vriend

2 years ago

14.7k
Simple tailwind footer
Simple tailwind footer with newsletter

Author:
Laurits

2 years ago

9.6k
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Author:
Pagedone

11 months ago

1.9k
Small Footer

Author:
Abhijit Sen

2 years ago

10.9k
Footer
A simple footer with link adjustment for smartphones

Author:
Matti

4 months ago

546
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

11 months ago

2k
Sticky bottom footer

Author:
Isabella Kowalski

2 years ago

9.7k
Simple Footer

Author:
Samuel Abera

5 months ago

1.9k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Author:
Pagedone

11 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components