Home
Matti
Footer

Footer

A simple footer with link adjustment for smartphones

This tailwind example is contributed by Matti, on 02-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Footer

Author Matti

547

Fork Fullscreen

<footer class="w-full py-6 text-gray-700 dark:bg-gray-800 dark:text-white">
    <div class="w-full px-3 md:!px-0 md:w-3/4 mx-auto flex flex-col md:flex-row">
        <div class="w-full md:w-2/5">
            <div class="flex flex-col">
                <div class="flex flex-row">
                  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="36" height="36" viewBox="0 0 48 48"><path fill="#059669" d="M2.141 34l3.771 6.519.001.001C6.656 41.991 8.18 43 9.94 43l.003 0 0 0h25.03l-5.194-9H2.141zM45.859 34.341c0-.872-.257-1.683-.697-2.364L30.977 7.319C30.245 5.94 28.794 5 27.124 5h-7.496l21.91 37.962 3.454-5.982C45.673 35.835 45.859 35.328 45.859 34.341zM25.838 28L16.045 11.038 6.252 28z"></path></svg>
                  <h1 class="font-semibold ml-2">Contoso</h1>
                </div>
                <p class="text-sm ml-11 -mt-4">Your qualified Business partner</p>
                <p class="text-sm mt-4 w-full md:max-w-[90%] xl:max-w-[78%]">
                  We provide you a perfect service with adjustment of your imagines. Get in contact to find out more about it. If you like the created components follow for more or make them as favorite.
                </p>
            </div>
        </div>
        <div class="w-full md:w-1/5 flex flex-col mt-8 md:!mt-0">
            <span class="font-semibold uppercase mb-3 dark:text-gray-600">Navigate</span>
            <ul class="flex flex-row md:!flex-col">
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Home</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Services</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Team</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Contact</a></li>
            </ul>
        </div>
        <div class="w-full md:w-1/5 flex flex-col mt-4 md:!mt-0">
            <span class="font-semibold uppercase mb-3 dark:text-gray-600">Help options</span>
            <ul class="flex flex-row md:!flex-col">
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Frequently Asked</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Downloads</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Documentations</a></li>
            </ul>
        </div>
        <div class="w-full md:w-1/5 flex flex-col mt-4 md:!mt-0">
            <span class="font-semibold uppercase mb-3 dark:text-gray-600">Navigate</span>
            <ul class="flex flex-row md:!flex-col">
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Imprint</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Privacy</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Terms &amp; Conditions</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Trademarks</a></li>
            </ul>
        </div>
    </div>
    <div class="w-full px-4 md:!px-0 md:w-3/4 mx-auto text-sm flex flex-col md:flex-row">
      <div class="w-full md:w-2/3 text-gray-500 mt-3 md:mt-5">
        &copy;2024 Contoso.com &#183; All rights reserved.<br />
        <span class="text-[90%]">All third-party product, company names and logos are trademarks™ or registered® trademarks and remain the property of their respective holders.</span>
      </div>
      <div class="w-full md:w-1/3 text-gray-200 dark:text-gray-700 mt-3 md:mt-5 md:text-end">
        Template created by Matti<br />
        The component was shared on tailwindflex.com and is free to use and modify.
      </div>
    </div>
</footer>

Related Examples

Creative with CTA buttons
Use Below tailwind css footer example with CTA buttons and site links.

Author:
Pagedone

11 months ago

2k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

2 weeks ago

64
Responsive Footer
This a full responsive footer made with tailwind

Author:
Pape Toulé Yade

1 year ago

1.7k
Active Beauty Main Page

Author:
Maxim

2 weeks ago

132
Newsletter Footer
Fully Responsive newsletter footer page

Author:
AKASH GANDHAR

9 months ago

1.4k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

2 weeks ago

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

Author:
Pagedone

11 months ago

1.4k
Centered footer with subscribe form
Use this example to center align everything in footer with brand logo, sitemap links and subscribe form.

Author:
Pagedone

11 months ago

1.4k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

4 months ago

2k
Small Footer

Author:
Abhijit Sen

2 years ago

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

Author:
Nikita

1 year ago

3.4k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

9 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components