Component:
Footer Software Modern

Name: Footer Software Modern
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Footer Page Section Navigation Software Modern
Colors:
Description:
This carefully crafted Footer component is perfect for Software landing pages, featuring a Modern design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

                <!--
@type: Footer
@industry: Software
@style: Modern
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&family=JetBrains+Mono:wght@400;500&display=swap');
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0a0a0a;
    background-color: #fafafa;
    background-image: 
      radial-gradient(at 0% 0%, rgba(20, 184, 166, 0.08) 0px, transparent 50%),
      radial-gradient(at 100% 0%, rgba(20, 184, 166, 0.05) 0px, transparent 50%),
      radial-gradient(at 50% 100%, rgba(20, 184, 166, 0.03) 0px, transparent 50%);
  }
  body:before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(
      ellipse 60% 50% at 50% 0%,
      #000 70%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 60% 50% at 50% 0%,
      #000 70%,
      transparent 100%
    );
  }
  .mono { font-family: 'JetBrains Mono', monospace; }
</style>

<footer class="relative pt-16 pb-10 px-6 overflow-hidden border-t border-zinc-200 bg-white">
  <div class="max-w-[1200px] mx-auto">
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-12 gap-12 mb-20">

      <div class="col-span-2 md:col-span-4 lg:col-span-5 space-y-6">
        <div class="flex items-center gap-2 cursor-pointer">
          <div class="relative w-9 h-9">
            <div class="absolute inset-0 bg-zinc-900 rounded-xl flex items-center justify-center">
              <div class="w-4 h-4 border-2 border-teal-400 rounded-sm shadow-[0_0_8px_rgba(45,212,191,0.5)]"></div>
            </div>
          </div>
          <span class="text-xl font-extrabold tracking-tighter uppercase italic text-zinc-900">
            Kinetik
          </span>
        </div>
        <p class="text-zinc-500 font-medium leading-relaxed max-w-sm">
          Engineering the next generation of developer velocity. Built natively for macOS to respect your hardware and
          your headspace.
        </p>
      </div>

      <div class="lg:col-span-2 space-y-6">
        <h5 class="text-xs font-black uppercase tracking-[0.2em] text-zinc-900">Product</h5>
        <ul class="space-y-4">
          <li><a href="#" class="text-sm font-medium text-zinc-500 hover:text-teal-600 transition-colors">Changelog</a>
          </li>
          <li><a href="#"
              class="text-sm font-medium text-zinc-500 hover:text-teal-600 transition-colors">Documentation</a></li>
          <li><a href="#" class="text-sm font-medium text-zinc-500 hover:text-teal-600 transition-colors">Desktop
              App</a></li>
          <li><a href="#" class="text-sm font-medium text-zinc-500 hover:text-teal-600 transition-colors">CLI Tool</a>
          </li>
        </ul>
      </div>

      <div class="lg:col-span-2 space-y-6">
        <h5 class="text-xs font-black uppercase tracking-[0.2em] text-zinc-900">Company</h5>
        <ul class="space-y-4">
          <li><a href="#" class="text-sm font-medium text-zinc-500 hover:text-teal-600 transition-colors">About</a></li>
          <li><a href="#" class="text-sm font-medium text-zinc-500 hover:text-teal-600 transition-colors">Security</a>
          </li>
          <li><a href="#" class="text-sm font-medium text-zinc-500 hover:text-teal-600 transition-colors">Privacy</a>
          </li>
          <li><a href="#" class="text-sm font-medium text-zinc-500 hover:text-teal-600 transition-colors">Manifesto</a>
          </li>
        </ul>
      </div>

      <div class="col-span-2 md:col-span-4 lg:col-span-3 space-y-6">
        <h5 class="text-xs font-black uppercase tracking-[0.2em] text-zinc-900">Stay Synced</h5>
        <form class="relative">
          <input type="email" placeholder="[email protected]"
            class="w-full px-4 py-3 rounded-xl bg-zinc-50 border border-zinc-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all" />
          <button
            class="absolute right-2 top-2 p-1.5 bg-zinc-900 text-teal-400 rounded-lg hover:bg-zinc-800 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </button>
        </form>
        <p class="text-[11px] text-zinc-400 font-medium">
          Join 4,000+ developers receiving our monthly architecture deep-dives. No spam, just code.
        </p>
      </div>
    </div>

    <div class="pt-8 border-t border-zinc-100 flex flex-col md:flex-row justify-between items-center gap-6">
      <div class="flex items-center gap-6">
        <p class="text-xs font-medium text-zinc-400">© 2026 Kinetik Software Inc.</p>
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 rounded-full bg-teal-500"></div>
          <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-tighter">All Systems Operational</span>
        </div>
      </div>

      <div class="flex items-center gap-6">
        <a href="#" class="text-zinc-400 hover:text-zinc-900 transition-colors">
          <span class="sr-only">GitHub</span>
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path
              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
          </svg>
        </a>
        <a href="#" class="text-zinc-400 hover:text-zinc-900 transition-colors">
          <span class="sr-only">X (Twitter)</span>
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path
              d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.045 4.126H5.078z" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</footer>
Footer Software Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
