Donation hero with amount chips

Build a fundraising hero with Tailwind CSS in two columns. The left column carries a small campaign label, a headline naming the concrete outcome, a paragraph, and a progress block: a figure raised against a target, a thin track with a green fill at sixty-eight percent, and a muted line giving the donor count and days remaining. Under it, a row of three tiny facts separated by dots. The right column is a bordered rounded-2xl white card: a "Give once / Monthly" segmented toggle, a three-by-two grid of amount chips where one is preselected dark and the last is a custom-amount field, a line under the chips explaining in plain terms what the selected amount buys, a full-width dark donate button and three small trust notes with glyphs covering gift aid, the payment processor and the share that reaches the programme.

<section class="mx-auto max-w-6xl px-6 py-20">
  <div class="grid items-center gap-14 lg:grid-cols-2">
    <div>
      <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Winter appeal</p>
      <h1 class="mt-4 text-4xl font-semibold leading-tight tracking-tight text-neutral-900 sm:text-5xl">
        Keep 400 homes warm through February
      </h1>
      <p class="mt-5 max-w-md leading-relaxed text-neutral-500">
        We fit insulation, service boilers and clear energy debt for households in Rotterdam-Zuid. Last winter we reached 312 homes. This year the waiting list is longer.
      </p>

      <div class="mt-8 max-w-md">
        <div class="flex items-baseline justify-between">
          <p class="text-2xl font-semibold tracking-tight text-neutral-900">€68,420</p>
          <p class="text-sm text-neutral-500">of €100,000</p>
        </div>
        <div class="mt-3 h-2.5 overflow-hidden rounded-full bg-neutral-100">
          <div class="h-full w-[68%] rounded-full bg-green-600"></div>
        </div>
        <p class="mt-2.5 text-sm text-neutral-500">1,284 donors · 23 days remaining</p>
      </div>

      <div class="mt-6 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-neutral-400">
        <span>Registered charity 8811-44</span><span>·</span><span>Audited accounts published</span><span>·</span><span>Founded 2011</span>
      </div>
    </div>

    <div class="rounded-2xl border border-neutral-200 bg-white p-7 shadow-sm">
      <div class="flex rounded-xl border border-neutral-200 p-1">
        <button class="flex-1 rounded-lg px-3 py-2 text-sm font-medium text-neutral-600 transition">Give once</button>
        <button class="flex-1 rounded-lg bg-neutral-900 px-3 py-2 text-sm font-medium text-white">Monthly</button>
      </div>

      <div class="mt-5 grid grid-cols-3 gap-2">
        <button class="rounded-xl border border-neutral-200 py-3 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">€5</button>
        <button class="rounded-xl border border-neutral-200 py-3 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">€10</button>
        <button class="rounded-xl border-2 border-neutral-900 bg-neutral-900 py-3 text-sm font-medium text-white">€25</button>
        <button class="rounded-xl border border-neutral-200 py-3 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">€50</button>
        <button class="rounded-xl border border-neutral-200 py-3 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">€100</button>
        <input type="number" placeholder="Other" class="rounded-xl border border-neutral-200 px-3 py-3 text-center text-sm outline-none transition focus:border-neutral-900" />
      </div>

      <p class="mt-4 rounded-xl bg-neutral-50 px-4 py-3 text-sm leading-relaxed text-neutral-600">
        €25 a month pays for a full loft insulation kit every quarter — the single change that cuts a bill most.
      </p>

      <button class="mt-5 w-full rounded-xl bg-neutral-900 py-3.5 text-sm font-medium text-white transition hover:bg-neutral-800">Donate €25 monthly</button>

      <div class="mt-5 space-y-2 border-t border-neutral-200 pt-4 text-xs text-neutral-500">
        <p class="flex items-start gap-2"><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 12.5 4.25 4.25L19 7"/></svg> <span>Dutch taxpayers can claim this back as a periodic gift.</span></p>
        <p class="flex items-start gap-2"><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="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg> <span>Payments handled by Mollie. We never see your card.</span></p>
        <p class="flex items-start gap-2"><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"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg> <span>91 cents in every euro reaches the programme.</span></p>
      </div>
    </div>
  </div>
</section>