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

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

3 years ago

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

Author:
Prem..

3 years ago

18.3k
Footer with 3 sections

Author:
Mr Robot

3 years ago

13.2k
Simple footer

Author:
Piet Vriend

3 years ago

16k
Simple tailwind footer
Simple tailwind footer with newsletter

Author:
Laurits

3 years ago

10.3k
Newsletter with address location
Use this example to first show brand logo card, then show address locations of your company, a newsletter sign-up form.

Author:
Pagedone

1 year ago

2.9k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

10 months ago

1k
Standard footer
You can use this example for five column footer with social media accounts, sitemap links, copyright notice and brand logo.

Author:
Pagedone

1 year ago

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

8 months ago

1k
Footer (Tailwind UI)

Author:
Gopi Yadav

3 years ago

12.5k
Active Beauty Main Page

Author:
Maxim

10 months ago

1.1k
Simple centered footer
Use this example for simple footer with horizontal sitemap links, brand logo, and social media accounts.This example can also be used as a tailwind sticky footer.

Author:
Pagedone

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components