Home
Emre Yılmaz
Responsive footer

Responsive footer

Standard footer format

This tailwind example is contributed by Emre Yılmaz, on 05-Feb-2024. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Emre Yılmaz

3.3k

Fork Fullscreen

<footer class="border-t border-neutral-700/20 py-10 px-6 bg-white">
  <div class="mx-auto max-w-7xl">
    <div class="flex flex-wrap items-center justify-between gap-10 md:items-start lg:flex-nowrap">
      <div class="w-full sm:w-1/2 lg:w-1/3">
        <a href="/">
          <img alt="Logo" class="h-12" src="https://www.svgrepo.com/show/340614/logo-slack.svg" >
        </a>
        <p class="my-4 text-gray-700">
          Welcome to YourService.io, where innovation meets reliability. Our mission is to empower developers and
          businesses with cutting-edge tools and services to seamlessly build, deploy, and scale robust applications. At
          YourService.io, we prioritize performance, scalability, and security, ensuring that your full-stack
          applications meet the highest standards.
        </p>
      </div>
      <div class="w-full md:w-2/3">
        <div class="grid grid-cols-1 gap-4 text-sm sm:grid-cols-3 sm:gap-10 md:grid-cols-4">
          <div>
            <h3 class="font-bold uppercase text-gray-700">Pages</h3>
            <ul class="mt-4 space-y-2 text-gray-700">
              <li><a href="/#features">Features</a></li>
              <li><a href="/pricing">Pricing</a></li>
              <li><a href="/#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold uppercase text-gray-700">Support</h3>
            <ul class="mt-4 space-y-2 text-gray-700">
              <li><a href="mailto:support@yourservice.io">Request Feedback</a></li>
              <li><a href="mailto:support@yourservice.io">Submit Bugs</a></li>
              <li><a href="/contact-us">Contact Us</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold uppercase text-gray-700">Legal</h3>
            <ul class="mt-4 space-y-2 text-gray-700">
              <li><a href="/privacy-policy">Privacy Policy</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold uppercase text-gray-700">Contact</h3>
            <ul class="mt-4 space-y-2 text-gray-700">
              <li class="flex items-center gap-2">
                <a href="mailto:hello@yourservice.io" class="inline-link flex gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="tabler-icon tabler-icon-mail">
                    <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path>
                    <path d="M3 7l9 6l9 -6"></path>
                  </svg>hello@yourservice.io
                </a>
              </li>
              <li class="flex w-auto items-center justify-start gap-2">
                <a href="https://twitter.com/yourserviceio" class="inline-link flex gap-2" target="_blank"
                  rel="noreferrer">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="tabler-icon tabler-icon-brand-twitter">
                    <path
                      d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z">
                    </path>
                  </svg>Twitter
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-10 flex justify-between text-sm text-gray-700">
      <div>© 2024 YourService.io All rights reserved.</div>
    </div>
  </div>
</footer>

Related Examples

Basic footer

Author:
Mr Robot

3 years ago

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

Author:
Nikita

2 years ago

4.4k
Footer - Htmlwind
Simple centerd footer

Author:
Htmlwind

8 months ago

659
Minimalist iOS 26 Foote
Minimalist iOS 26 Foote

Author:
Omer fils ELENGA

3 months ago

76
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

11 months ago

1.3k
Footer

Author:
Ivan K

1 year ago

3.4k
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

1 year ago

2.3k
Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Author:
Maxim

1 year ago

1.4k
Very simple footer

Author:
Arya

3 years ago

12.9k
Responsive Footer

Author:
ariaw

10 months ago

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

10 months ago

682
Footer with App buttons
This example can be used if you want add your app buttons of store for download with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components