Studio contact footer

Build a footer for a small studio with Tailwind CSS, where contact details replace the usual link farm. Use a neutral-900 background with light text. The top block is a three-column grid: the first column has a large wordmark and a one-line description; the second is headed "Visit" with a street address across three lines, opening hours and a small "Get directions" link with a pin glyph; the third is headed "Say hello" with a large mailto-style email address in medium weight, a phone number, and a line about typical response time. Below a neutral-800 divider, a wide row containing three social glyph links on the left and, on the right, a small newsletter form of an inline input and an arrow button with a muted consent line beneath. Finish with a tiny bottom line holding the copyright, company number and a credit for the type used.

<footer class="bg-neutral-900 text-neutral-300">
  <div class="mx-auto max-w-6xl px-6 py-16">
    <div class="grid gap-12 md:grid-cols-3">
      <div>
        <p class="text-3xl font-semibold tracking-tight text-white">Corvid</p>
        <p class="mt-3 max-w-xs text-sm leading-relaxed text-neutral-400">A six-person studio making software and printed matter, mostly for people who make things themselves.</p>
      </div>

      <div>
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-500">Visit</p>
        <address class="mt-4 space-y-0.5 text-sm not-italic leading-relaxed text-neutral-300">
          <p>Studio 4, Havenstraat 12</p>
          <p>3024 CE Rotterdam</p>
          <p>The Netherlands</p>
        </address>
        <p class="mt-3 text-sm text-neutral-400">Mon–Thu, 09:30 – 17:30</p>
        <a href="#" class="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-white underline-offset-4 hover:underline"><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="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg> Get directions</a>
      </div>

      <div>
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-500">Say hello</p>
        <a href="#" class="mt-4 block text-lg font-medium text-white underline-offset-4 hover:underline">[email protected]</a>
        <a href="#" class="mt-1 block text-sm text-neutral-400 hover:text-white">+31 10 421 8890</a>
        <p class="mt-4 max-w-xs text-sm leading-relaxed text-neutral-500">We answer most enquiries within two working days, and we always answer.</p>
      </div>
    </div>

    <div class="mt-14 flex flex-col gap-6 border-t border-neutral-800 pt-8 md:flex-row md:items-start md:justify-between">
      <div class="flex gap-2">
        <a href="#" class="grid h-9 w-9 place-items-center rounded-full border border-neutral-800 text-neutral-400 transition hover:border-neutral-600 hover:text-white"><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-9 w-9 place-items-center rounded-full border border-neutral-800 text-neutral-400 transition hover:border-neutral-600 hover:text-white"><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>
        <a href="#" class="grid h-9 w-9 place-items-center rounded-full border border-neutral-800 text-neutral-400 transition hover:border-neutral-600 hover:text-white"><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>
      </div>

      <div class="w-full max-w-sm">
        <form class="flex gap-2">
          <input type="email" placeholder="Occasional letters, no more than six a year"
            class="min-w-0 flex-1 rounded-xl border border-neutral-800 bg-neutral-950 px-4 py-2.5 text-sm text-white outline-none transition placeholder:text-neutral-600 focus:border-neutral-600" />
          <button class="shrink-0 rounded-xl bg-white px-4 py-2.5 text-sm font-medium text-neutral-900 transition hover:bg-neutral-200"><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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></button>
        </form>
        <p class="mt-2 text-xs text-neutral-600">One click to unsubscribe. We never pass the list on.</p>
      </div>
    </div>

    <p class="mt-10 text-xs text-neutral-600">© 2026 Corvid Works BV · KVK 7712 4409 · Set in Söhne and Berkeley Mono</p>
  </div>
</footer>