Tailwind CSS Footer Examples

Website footers from a one-line copyright bar to a five-column link footer and a newsletter signup footer — responsive and ready to paste.

3 components · live preview · copy as HTML or JSX · free for commercial use

3 footers to copy

Simple Footer

Footers

<footer class="w-full border-t border-slate-200 bg-white">
  <div class="mx-auto flex max-w-6xl flex-col items-center gap-4 px-4 py-6 sm:flex-row sm:justify-between">
    <p class="text-sm text-slate-500">© 2026 Acme, Inc. All rights reserved.</p>
    <nav aria-label="Footer">
      <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-slate-600">
        <li><a href="#" class="transition-colors hover:text-slate-900">About</a></li>
        <li><a href="#" class="transition-colors hover:text-slate-900">Privacy</a></li>
        <li><a href="#" class="transition-colors hover:text-slate-900">Terms</a></li>
        <li><a href="#" class="transition-colors hover:text-slate-900">Contact</a></li>
      </ul>
    </nav>
  </div>
</footer>

Multi-Column Footer

Footers

Two columns on mobile, five on desktop — the brand block spans two of them.

<footer class="w-full bg-slate-900 text-slate-400">
  <div class="mx-auto max-w-6xl px-4 py-12">
    <div class="grid grid-cols-2 gap-8 md:grid-cols-5">
      <div class="col-span-2">
        <a href="#" class="text-lg font-bold text-white">Acme</a>
        <p class="mt-3 max-w-xs text-sm">Tools that help small teams ship faster, from first sketch to production.</p>
      </div>
      <div>
        <h3 class="text-sm font-semibold text-white">Product</h3>
        <ul class="mt-3 space-y-2 text-sm">
          <li><a href="#" class="transition-colors hover:text-white">Features</a></li>
          <li><a href="#" class="transition-colors hover:text-white">Pricing</a></li>
          <li><a href="#" class="transition-colors hover:text-white">Changelog</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-sm font-semibold text-white">Company</h3>
        <ul class="mt-3 space-y-2 text-sm">
          <li><a href="#" class="transition-colors hover:text-white">About</a></li>
          <li><a href="#" class="transition-colors hover:text-white">Careers</a></li>
          <li><a href="#" class="transition-colors hover:text-white">Contact</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-sm font-semibold text-white">Resources</h3>
        <ul class="mt-3 space-y-2 text-sm">
          <li><a href="#" class="transition-colors hover:text-white">Docs</a></li>
          <li><a href="#" class="transition-colors hover:text-white">Blog</a></li>
          <li><a href="#" class="transition-colors hover:text-white">Support</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-10 flex flex-col gap-4 border-t border-slate-800 pt-6 text-sm sm:flex-row sm:items-center sm:justify-between">
      <p>© 2026 Acme, Inc.</p>
      <ul class="flex gap-5">
        <li><a href="#" class="transition-colors hover:text-white">GitHub</a></li>
        <li><a href="#" class="transition-colors hover:text-white">X</a></li>
        <li><a href="#" class="transition-colors hover:text-white">LinkedIn</a></li>
      </ul>
    </div>
  </div>
</footer>

Footer with Newsletter Signup

Footers

Point the form's action at your newsletter provider. The visually hidden label keeps the email field accessible.

<footer class="w-full border-t border-slate-200 bg-slate-50">
  <div class="mx-auto max-w-6xl px-4 py-10">
    <div class="flex flex-col gap-6 rounded-2xl bg-indigo-600 p-6 text-white md:flex-row md:items-center md:justify-between">
      <div>
        <h2 class="text-lg font-bold">Get the monthly digest</h2>
        <p class="mt-1 text-sm text-indigo-100">One email a month with new releases. No spam, unsubscribe anytime.</p>
      </div>
      <form action="#" class="flex w-full max-w-md gap-2">
        <label for="footer-email" class="sr-only">Email address</label>
        <input id="footer-email" type="email" required placeholder="you@example.com" class="min-w-0 flex-1 rounded-lg bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-white/70" />
        <button type="submit" class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-800">Subscribe</button>
      </form>
    </div>
    <div class="mt-8 flex flex-col gap-3 text-sm text-slate-500 sm:flex-row sm:justify-between">
      <p>© 2026 Acme, Inc.</p>
      <nav aria-label="Legal">
        <ul class="flex gap-5">
          <li><a href="#" class="transition-colors hover:text-slate-900">Privacy</a></li>
          <li><a href="#" class="transition-colors hover:text-slate-900">Terms</a></li>
          <li><a href="#" class="transition-colors hover:text-slate-900">Cookies</a></li>
        </ul>
      </nav>
    </div>
  </div>
</footer>

What belongs in a footer

Footers are where visitors look for the things they could not find above: legal links, contact details, careers, documentation and social profiles. A small site needs only the simple footer — copyright on one side, four links on the other. Larger sites benefit from a multi-column footer that groups links under short headings such as Product, Company and Resources, which doubles as a lightweight sitemap for users and crawlers.

The column footer uses grid-cols-2 on mobile and md:grid-cols-5 on desktop, with the brand block spanning two columns. The newsletter footer pairs a highlighted signup card with a slim legal bar underneath, a common pattern for blogs and SaaS marketing sites.

Accessibility tips

Use a single <footer> at the end of the page so it is exposed as the contentinfo landmark, and label any <nav> inside it (aria-label="Footer") to distinguish it from the main navigation. Footer text is often small and gray — keep it at 4.5:1 contrast or better. Every form field, including a one-field newsletter signup, needs a label; a visually hidden sr-only label keeps the design clean.

← Back to the full UI Component Library

Frequently Asked Questions

How do I keep a footer at the bottom of a short page?↓

Make the page wrapper min-h-screen flex flex-col and give the main content flex-1. The footer is then pushed to the bottom when there is little content and follows the content normally otherwise.

Which links should a website footer include?↓

At minimum: privacy policy, terms and a contact link. Add product, company and support links in grouped columns as the site grows, plus social profiles if you are active on them.

Should footer links be inside a nav element?↓

Wrap major link groups in a <nav> with a distinct aria-label such as "Footer". A short list of legal links can also be a plain list inside the <footer>.

Last updated: November 7, 2026