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

1.4k

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

Dark Footer with newsletter
Use Following Footer for dark vsersion of your website with newsletter, social icons and site links.

Author:
Pagedone

1 year ago

3k
Footer with 3 sections

Author:
Mr Robot

3 years ago

13.2k
Responsive Footer
This a full responsive footer made with tailwind

Author:
Pape Toulé Yade

1 year ago

2.5k
Simple Footer 3

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

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

9 months ago

1.1k
Get it on Google play / App store section

Author:
Rajesh kulkarni

3 years ago

10.3k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

1 year ago

1.3k
Minimalist iOS 26 Foote
Minimalist iOS 26 Foote

Author:
Omer fils ELENGA

2 months ago

75
footer

Author:
Raul antonio de la cruz hernandez

2 months ago

191
Basic footer
Basic footer with subscribe to the newsletter section

Author:
Mr Robot

3 years ago

9.8k
Five columns with subscribe button
This example of tailwind css footer can be used if you want five columns in your footer with brand logo, sitemap links, description and social media account with additional subscibe button to connect with your website.

Author:
Pagedone

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components