Multi-column footer

Build a site footer with Tailwind CSS: a top area with a brand block (logo, one-line description, social icons) and three or four columns of grouped links. Below, a divider and a bottom row with copyright on the left and small legal links on the right. Use muted text and clear column headings.

<footer class="border-t border-neutral-200 bg-white">
  <div class="mx-auto max-w-6xl px-6 py-14">
    <div class="grid gap-10 md:grid-cols-5">
      <div class="md:col-span-2">
        <div class="flex items-center gap-2 font-semibold text-neutral-900"><span class="h-6 w-6 rounded-md bg-neutral-900"></span> Nimbus</div>
        <p class="mt-3 max-w-xs text-sm text-neutral-500">The workspace for teams that ship. Built for speed and clarity.</p>
        <div class="mt-4 flex gap-3 text-neutral-400">
          <a href="#" class="hover:text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M15 21v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.7-1.4 5.7-6.2 0-1.4-.5-2.5-1.3-3.4.1-.3.6-1.7-.1-3.4 0 0-1.1-.3-3.6 1.3a12.4 12.4 0 0 0-6.5 0C6.2 2.2 5.1 2.5 5.1 2.5c-.7 1.7-.2 3.1-.1 3.4a5 5 0 0 0-1.3 3.4c0 4.8 2.9 5.9 5.7 6.2-.5.5-.6 1-.5 2V21"/><path d="M9 18c-2.7.8-2.7-1.3-3.8-1.6"/></svg></a>
          <a href="#" class="hover:text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M5 4l14 16M19 4 5 20"/></svg></a>
          <a href="#" class="hover:text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 9v11M7 5v.01M11 20v-6.5a4.5 4.5 0 0 1 9 0V20M11 9v11"/></svg></a>
        </div>
      </div>
      <div>
        <h4 class="text-sm font-medium text-neutral-900">Product</h4>
        <ul class="mt-3 space-y-2 text-sm text-neutral-500">
          <li><a href="#" class="hover:text-neutral-900">Features</a></li>
          <li><a href="#" class="hover:text-neutral-900">Pricing</a></li>
          <li><a href="#" class="hover:text-neutral-900">Changelog</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-sm font-medium text-neutral-900">Company</h4>
        <ul class="mt-3 space-y-2 text-sm text-neutral-500">
          <li><a href="#" class="hover:text-neutral-900">About</a></li>
          <li><a href="#" class="hover:text-neutral-900">Careers</a></li>
          <li><a href="#" class="hover:text-neutral-900">Blog</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-sm font-medium text-neutral-900">Resources</h4>
        <ul class="mt-3 space-y-2 text-sm text-neutral-500">
          <li><a href="#" class="hover:text-neutral-900">Docs</a></li>
          <li><a href="#" class="hover:text-neutral-900">Support</a></li>
          <li><a href="#" class="hover:text-neutral-900">Status</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-neutral-100 pt-6 text-sm text-neutral-400 sm:flex-row">
      <p>© 2026 Nimbus, Inc. All rights reserved.</p>
      <div class="flex gap-5">
        <a href="#" class="hover:text-neutral-900">Privacy</a>
        <a href="#" class="hover:text-neutral-900">Terms</a>
        <a href="#" class="hover:text-neutral-900">Cookies</a>
      </div>
    </div>
  </div>
</footer>