SaaS Footer

SaaS footer built with pure HTML and Tailwind CSS

This tailwind example is contributed by JUGENDRA GANGWAR, on 02-Jul-2026. Component is made with Tailwind v3.4. It is responsive.

Footer

Author JUGENDRA GANGWAR

Tailwind v3.4 106 2

Fork Fullscreen

<div class="col-span-2 sm:col-span-3 lg:col-span-2">
        <a href="#" class="inline-flex items-center gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">
          <span class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-400 to-fuchsia-500 text-white shadow-lg shadow-indigo-500/30">
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
          </span>
          <span class="text-lg font-semibold tracking-tight text-white">Nexora</span>
        </a>
        <p class="mt-4 max-w-xs text-sm leading-relaxed text-slate-400">
          The unified platform for building, deploying, and scaling modern SaaS applications — trusted by engineering teams worldwide.
        </p>

<div class="mt-6 flex flex-col gap-2.5 text-sm text-slate-400">
          <a href="mailto:hello@nexora.io" class="group inline-flex items-center gap-2.5 w-fit transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">
            <svg class="h-4 w-4 text-slate-500 group-hover:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            hello@nexora.io
          </a>
          <a href="tel:+18005550148" class="group inline-flex items-center gap-2.5 w-fit transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">
            <svg class="h-4 w-4 text-slate-500 group-hover:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
            +1 (800) 555-0148
          </a>
          <span class="inline-flex items-start gap-2.5 w-fit text-slate-400">
            <svg class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            548 Market St, Suite 8112, San Francisco, CA 94104
          </span>
        </div>
      </div>

<nav aria-labelledby="footer-product">
        <h3 id="footer-product" class="text-xs font-semibold uppercase tracking-wider text-slate-200">Product</h3>
        <ul class="mt-4 space-y-3 text-sm">
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Overview</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Workflows</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Analytics</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Automations</a></li>
          <li><a href="#" class="inline-flex items-center gap-1.5 text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Pricing</a></li>
        </ul>
      </nav>

<nav aria-labelledby="footer-integrations">
        <h3 id="footer-integrations" class="text-xs font-semibold uppercase tracking-wider text-slate-200">Integrations</h3>
        <ul class="mt-4 space-y-3 text-sm">
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Slack</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">GitHub</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Figma</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Zapier</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">View all (40+)</a></li>
        </ul>
      </nav>

<nav aria-labelledby="footer-docs">
        <h3 id="footer-docs" class="text-xs font-semibold uppercase tracking-wider text-slate-200">Documentation</h3>
        <ul class="mt-4 space-y-3 text-sm">
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Getting started</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">API reference</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">SDKs</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Status page</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Changelog</a></li>
        </ul>
      </nav>

<nav aria-labelledby="footer-company">
        <h3 id="footer-company" class="text-xs font-semibold uppercase tracking-wider text-slate-200">Company</h3>
        <ul class="mt-4 space-y-3 text-sm">
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">About us</a></li>
          <li>
            <a href="#" class="inline-flex items-center gap-2 text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">
              Careers
              <span class="rounded-full bg-emerald-400/10 px-2 py-0.5 text-[10px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-400/20">Hiring</span>
            </a>
          </li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Blog</a></li>
          <li><a href="#" class="text-slate-400 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Contact sales</a></li>
        </ul>
      </nav>
    </div>

<div class="mt-14 flex flex-wrap items-center justify-center gap-x-10 gap-y-4 border-y border-white/10 py-6 text-slate-500">
      <span class="flex items-center gap-2 text-xs font-medium uppercase tracking-wider">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        SOC 2 Type II
      </span>
      <span class="flex items-center gap-2 text-xs font-medium uppercase tracking-wider">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
        GDPR Compliant
      </span>
      <span class="flex items-center gap-2 text-xs font-medium uppercase tracking-wider">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
        99.99% Uptime SLA
      </span>
      <span class="flex items-center gap-2 text-xs font-medium uppercase tracking-wider">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        ISO 27001
      </span>
    </div>

<div class="mt-8 flex flex-col-reverse items-center justify-between gap-6 sm:flex-row">
      <p class="text-center text-xs text-slate-500 sm:text-left">© 2026 Nexora Technologies, Inc. All rights reserved.</p>

<ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs text-slate-500">
        <li><a href="#" class="transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Privacy Policy</a></li>
        <li><a href="#" class="transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Terms of Service</a></li>
        <li><a href="#" class="transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 rounded-md">Cookie Policy</a></li>
      </ul>

Related Examples

Footer
Simple Dark footer

KULDEEP

1 year ago

1.4k
Subscribe to our newsletter section

Conan Hilton

4 years ago

12k
Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

KULDEEP

1 year ago

1.4k
footer

Raul antonio de la cruz hernandez

10 months ago

811
Four columns with subscribe form
Use this example for four column footer with subscribe form, brand logo, sitemap links and social media accounts.

Pagedone

2 years ago

2.7k
footer
Footer with contact info, navigation, account links, and social media icons.

Yasmin Rodrigues

2 years ago

3.8k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Nicole Shalom

1 year ago

1.8k
footer
footer

Anonymous

1 year ago

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

Pagedone

2 years ago

2.8k
Header and footer with Doodle design with Tailwind CSS
Creative responsive header and footer with doodle patterns built with Tailwind CSS. Features animated SVG doodles, interactive CTA buttons, and Fully customizable components for web projects

Homayoun

9 months ago

402
Responsive footer

Lukas Müller

3 years ago

12k
Horizontal footer
Use this horizontal footer tailwind css example if you want horizontal footer layout side by side, which includes sitemap links, brand logo and social media accounts.

Pagedone

2 years ago

3.2k