Footer
Footer with office locations
Three cities with addresses and local contacts
Three cities with addresses and local contacts
Build a footer with Tailwind CSS that leads with physical presence. The top block is a three-column grid of offices: each has a city name as a small heading with a muted "HQ" or "Studio" label beside it, a three-line address in non-italic address markup, a phone number and an email as links, and a small line giving the local time and whether the office is currently open, with a coloured dot. Under a hairline, a compact four-column link grid in the usual quiet style with short lists. Under another hairline, a bottom bar holding the wordmark on the left, the copyright and registration number in the middle, and three social glyph buttons on the right. Keep everything on white with neutral-200 rules, and stack the offices to a single column below md with extra vertical spacing so the addresses stay readable.<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-3">
<div>
<p class="flex items-center gap-2 text-sm font-semibold text-neutral-900">Rotterdam <span class="rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] font-medium text-neutral-500">HQ</span></p>
<address class="mt-3 space-y-0.5 text-sm not-italic leading-relaxed text-neutral-500">
<p>Havenstraat 12, Studio 4</p>
<p>3024 CE Rotterdam</p>
<p>The Netherlands</p>
</address>
<div class="mt-3 space-y-1 text-sm">
<a href="#" class="block text-neutral-900 underline-offset-4 hover:underline">+31 10 421 8890</a>
<a href="#" class="block text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">[email protected]</a>
</div>
<p class="mt-3 flex items-center gap-2 text-xs text-neutral-500"><span class="h-1.5 w-1.5 rounded-full bg-green-500"></span> 14:22 local · open until 18:00</p>
</div>
<div>
<p class="flex items-center gap-2 text-sm font-semibold text-neutral-900">Lisbon <span class="rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] font-medium text-neutral-500">Studio</span></p>
<address class="mt-3 space-y-0.5 text-sm not-italic leading-relaxed text-neutral-500">
<p>Rua da Prata 84, 2º</p>
<p>1100-421 Lisboa</p>
<p>Portugal</p>
</address>
<div class="mt-3 space-y-1 text-sm">
<a href="#" class="block text-neutral-900 underline-offset-4 hover:underline">+351 21 880 4412</a>
<a href="#" class="block text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">[email protected]</a>
</div>
<p class="mt-3 flex items-center gap-2 text-xs text-neutral-500"><span class="h-1.5 w-1.5 rounded-full bg-green-500"></span> 13:22 local · open until 18:00</p>
</div>
<div>
<p class="flex items-center gap-2 text-sm font-semibold text-neutral-900">Toronto <span class="rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] font-medium text-neutral-500">Studio</span></p>
<address class="mt-3 space-y-0.5 text-sm not-italic leading-relaxed text-neutral-500">
<p>402 Adelaide St W, Suite 700</p>
<p>Toronto, ON M5V 1S7</p>
<p>Canada</p>
</address>
<div class="mt-3 space-y-1 text-sm">
<a href="#" class="block text-neutral-900 underline-offset-4 hover:underline">+1 416 555 0184</a>
<a href="#" class="block text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">[email protected]</a>
</div>
<p class="mt-3 flex items-center gap-2 text-xs text-neutral-500"><span class="h-1.5 w-1.5 rounded-full bg-neutral-300"></span> 08:22 local · opens at 09:00</p>
</div>
</div>
<div class="mt-12 grid gap-8 border-t border-neutral-200 pt-10 sm:grid-cols-2 lg:grid-cols-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Product</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Platform</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Pricing</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Security</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Company</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">About</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Careers</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Press</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Resources</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Documentation</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Changelog</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Status</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Legal</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Terms</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Privacy</a></li>
<li><a href="#" class="transition hover:text-neutral-900">DPA</a></li>
</ul>
</div>
</div>
<div class="mt-10 flex flex-col items-center gap-4 border-t border-neutral-200 pt-6 sm:flex-row sm:justify-between">
<p class="text-sm font-semibold tracking-tight text-neutral-900">Halden</p>
<p class="text-xs text-neutral-400">© 2026 Halden Systems BV · KVK 8811 4402 · VAT NL8114402B01</p>
<div class="flex gap-2">
<a href="#" class="grid h-8 w-8 place-items-center rounded-full border border-neutral-200 text-neutral-500 transition 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="grid h-8 w-8 place-items-center rounded-full border border-neutral-200 text-neutral-500 transition 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="grid h-8 w-8 place-items-center rounded-full border border-neutral-200 text-neutral-500 transition 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>
</footer>