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

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

1 year ago

11.7k
Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

9.5k
Footer with 3 sections

Author:
Mr Robot

1 year ago

10.9k
Four columns with address location
You can use this Tailwind Footer example to first show address location of your company with brand logo next to sitemap links.

Author:
Pagedone

6 months ago

823
Small Footer

Author:
Abhijit Sen

1 year ago

9.9k
Footer with images

Author:
Mr Robot

1 year ago

8k
Footer blue theme

Author:
Leon Bachmann

1 year ago

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

6 months ago

1k
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Author:
Pagedone

6 months ago

1.4k
Newsletter Footer
Fully Responsive newsletter footer page

Author:
AKASH GANDHAR

4 months ago

631
Crafting a Responsive Footer with TypeScript, and Tailwind CSS
This is a well-structured and comprehensive footer section that uses Tailwind CSS for styling and layout. Here’s a brief explanation of what each part does: Footer Container (<footer class="bg-gray-800">): The footer is wrapped in a <footer> element with a dark background using the bg-gray-800 class. The aria-labelledby="footer-heading" attribute is used for accessibility, linking the <footer> to the invisible heading (<h2 id="footer-heading" class="sr-only">Footer</h2>). Main Content Area: The content inside the footer is centered and spaced using utility classes like max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8. Footer Sections: The footer is divided into several sections using grid layouts (xl:grid xl:grid-cols-5 xl:gap-8), which organize content into columns. Each section (Solutions, Support, Company, Legal) contains a heading with a list of links. These links are styled with Tailwind classes for consistent spacing and hover effects (text-base text-gray-300 hover:text-white). Language & Currency Selector: This section provides dropdowns for selecting language and currency. Tailwind's form utilities (@tailwindcss/forms plugin) are used to style the select elements. Newsletter Subscription Form: A subscription form is provided with an email input and a submit button. The form is styled to be responsive, with focus states for accessibility (focus:ring-2 focus:ring-offset-2). Social Media Links: Social media icons (Facebook, Instagram, etc.) are included, each wrapped in a link with hover effects. Icons are created using SVGs, which are scalable and look sharp at any size. Final Section: The footer concludes with another grid layout, ensuring spacing and alignment for different screen sizes. Customization Tips: Colors: You can easily customize the colors using Tailwind's utility classes (e.g., bg-gray-800, text-gray-400) to match your design. Icons: Replace SVGs with the appropriate icons for your needs. You might use a different icon set or add more icons. Responsive Design: Tailwind's utility classes like sm:, md:, lg:, xl: ensure that the footer is responsive across devices. Adjust the layout or padding if needed. Additional Considerations: SEO: Ensure the links in the footer point to meaningful pages to improve SEO. Accessibility: Consider adding aria-labels to the form elements and social media links to enhance accessibility further. This footer is ready to be integrated into a Tailwind CSS-powered project, offering both aesthetic appeal and functional utility.

Author:
zobaidul kaziex

2 months ago

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

Author:
Pagedone

6 months ago

423

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent