Brand + link columns + legal row
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.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
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>