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