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 109 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

beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3.1k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Lekhraj Ghimire

1 year ago

2.5k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

ABDESLAMI ACHRAF

2 years ago

4.6k
footer
footer

Anonymous

1 year ago

2.2k
Footer version Ousmane
Ce footer est associer a un menu de navigation qui apparait sous le mobile donc avec sa plus besoin de gerer les menus sous le mobile.

Ousmane CISSE

1 year ago

558
Pre-footer Newsletter
Use this example with a Newsletter section before the footer, a sitemap, the logo of your brand and social media accounts.

Pagedone

2 years ago

3.4k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.7k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Pagedone

2 years ago

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

Nikita

2 years ago

4.9k
Footer

Ivan K

2 years ago

3.9k
Footer
Simple Dark footer

KULDEEP

1 year ago

1.4k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k