Sponsors and partners footer

Create an event or open-source project footer with Tailwind CSS that credits sponsors in tiers. Start with a centred small label and a one-line thank-you heading. Then three tiers stacked: a lead tier with two large bordered tiles holding wordmarks and a tiny "Lead partner" label; a supporting tier with four medium tiles; and a community tier with eight small tiles in a dense grid, all wordmarks rendered as muted uppercase text. Between tiers, thin hairlines with a centred tier label sitting on the line. Under the tiers, a bordered strip inviting new sponsors with a line of copy, a prospectus link and a contact email. Finish with a normal bottom bar holding the copyright, a code-of-conduct link, and a line naming the licence the project is released under.

<footer class="border-t border-neutral-200 bg-white">
  <div class="mx-auto max-w-5xl px-6 py-14">
    <div class="text-center">
      <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Supported by</p>
      <h2 class="mt-3 text-xl font-semibold tracking-tight text-neutral-900">Nine organisations pay for the servers so you do not have to</h2>
    </div>

    <div class="mt-10 grid gap-4 sm:grid-cols-2">
      <div class="grid place-items-center rounded-xl border border-neutral-200 py-10">
        <span class="text-lg font-semibold uppercase tracking-[0.2em] text-neutral-400">Northwind</span>
        <span class="mt-2 text-[10px] uppercase tracking-widest text-neutral-300">Lead partner</span>
      </div>
      <div class="grid place-items-center rounded-xl border border-neutral-200 py-10">
        <span class="text-lg font-semibold uppercase tracking-[0.2em] text-neutral-400">Oakline</span>
        <span class="mt-2 text-[10px] uppercase tracking-widest text-neutral-300">Lead partner</span>
      </div>
    </div>

    <div class="relative my-9 text-center">
      <span class="absolute inset-x-0 top-1/2 h-px bg-neutral-200"></span>
      <span class="relative bg-white px-4 text-[11px] font-medium uppercase tracking-widest text-neutral-400">Supporting</span>
    </div>

    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
      <div class="grid place-items-center rounded-xl border border-neutral-200 py-7"><span class="text-sm font-semibold uppercase tracking-widest text-neutral-300">Kestrel</span></div>
      <div class="grid place-items-center rounded-xl border border-neutral-200 py-7"><span class="text-sm font-semibold uppercase tracking-widest text-neutral-300">Fernbrook</span></div>
      <div class="grid place-items-center rounded-xl border border-neutral-200 py-7"><span class="text-sm font-semibold uppercase tracking-widest text-neutral-300">Meridian</span></div>
      <div class="grid place-items-center rounded-xl border border-neutral-200 py-7"><span class="text-sm font-semibold uppercase tracking-widest text-neutral-300">Corvid</span></div>
    </div>

    <div class="relative my-9 text-center">
      <span class="absolute inset-x-0 top-1/2 h-px bg-neutral-200"></span>
      <span class="relative bg-white px-4 text-[11px] font-medium uppercase tracking-widest text-neutral-400">Community</span>
    </div>

    <div class="grid grid-cols-3 gap-2 sm:grid-cols-4 lg:grid-cols-8">
      <div class="grid place-items-center rounded-lg border border-neutral-200 py-4"><span class="text-[11px] font-semibold uppercase tracking-widest text-neutral-300">Halden</span></div>
      <div class="grid place-items-center rounded-lg border border-neutral-200 py-4"><span class="text-[11px] font-semibold uppercase tracking-widest text-neutral-300">Vantage</span></div>
      <div class="grid place-items-center rounded-lg border border-neutral-200 py-4"><span class="text-[11px] font-semibold uppercase tracking-widest text-neutral-300">Ashgrove</span></div>
      <div class="grid place-items-center rounded-lg border border-neutral-200 py-4"><span class="text-[11px] font-semibold uppercase tracking-widest text-neutral-300">Studioform</span></div>
      <div class="grid place-items-center rounded-lg border border-neutral-200 py-4"><span class="text-[11px] font-semibold uppercase tracking-widest text-neutral-300">Thicket</span></div>
      <div class="grid place-items-center rounded-lg border border-neutral-200 py-4"><span class="text-[11px] font-semibold uppercase tracking-widest text-neutral-300">Juniper</span></div>
      <div class="grid place-items-center rounded-lg border border-neutral-200 py-4"><span class="text-[11px] font-semibold uppercase tracking-widest text-neutral-300">Rafter</span></div>
      <div class="grid place-items-center rounded-lg border border-neutral-200 py-4"><span class="text-[11px] font-semibold uppercase tracking-widest text-neutral-300">Saffron</span></div>
    </div>

    <div class="mt-10 flex flex-wrap items-center justify-between gap-4 rounded-xl border border-neutral-200 bg-neutral-50 px-6 py-5">
      <div>
        <p class="text-sm font-medium text-neutral-900">Sponsorship keeps this free and unbranded</p>
        <p class="mt-1 text-sm text-neutral-500">No logos in the product, no sponsored talks, no data sharing. Just hosting and one part-time maintainer.</p>
      </div>
      <div class="flex gap-4 text-sm font-medium">
        <a href="#" class="text-neutral-900 underline-offset-4 hover:underline">Prospectus <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></a>
        <a href="#" class="text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">[email protected]</a>
      </div>
    </div>

    <div class="mt-8 flex flex-col gap-3 border-t border-neutral-200 pt-6 text-xs text-neutral-400 sm:flex-row sm:items-center sm:justify-between">
      <p>© 2026 The Project · released under the Apache 2.0 licence</p>
      <a href="#" class="underline underline-offset-4 hover:text-neutral-700">Code of conduct</a>
    </div>
  </div>
</footer>