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

11.4k

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

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

Author:
Prem..

3 years ago

17.9k
Footer with 3 sections

Author:
Mr Robot

2 years ago

13k
Simple footer

Author:
Piet Vriend

2 years ago

15.7k
Simple tailwind footer
Simple tailwind footer with newsletter

Author:
Laurits

2 years ago

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

9 months ago

1.8k
Footer with social media buttons

Author:
Sophia Baker

2 years ago

13.5k
Footer
A simple footer with link adjustment for smartphones

Author:
Matti

11 months ago

1.1k
Responsive footer

Author:
Lukas Müller

2 years ago

11.1k
Horizontal footer with dark version
Use this example for simple horizontal layout of footer in dark version with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.9k
Responsive footer
Standard footer format

Author:
Emre Yılmaz

1 year ago

3.1k
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components