Gated asset download

Build a gated content block with Tailwind CSS in two columns. The left column shows the asset: a rounded-xl bordered card angled slightly with a transform, containing a mock report cover — a small publisher line, a bold title over three lines, a thin rule, and a footer with a page count and year — with a second card peeking from behind it to suggest depth. The right column carries a small "Free report" label, a heading, a paragraph on what is inside, a bulleted list of four findings with check glyphs, an email field with a dark "Send me the report" button beneath it, and a two-line consent note in small text explaining exactly what the email will be used for and offering an alternative link to read it in the browser without giving an address. Keep the tone honest — the alternative link should be genuinely prominent, not hidden.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="grid items-center gap-14 lg:grid-cols-2">
    <div class="relative mx-auto w-full max-w-xs">
      <div class="absolute left-6 top-6 h-full w-full rotate-3 rounded-xl border border-neutral-200 bg-neutral-100"></div>
      <div class="relative -rotate-2 rounded-xl border border-neutral-200 bg-white p-8 shadow-xl">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-400">Northwind Research</p>
        <p class="mt-8 text-2xl font-semibold leading-tight tracking-tight text-neutral-900">
          The state of<br />data platform<br />operations 2026
        </p>
        <div class="mt-8 h-px bg-neutral-200"></div>
        <div class="mt-4 flex items-center justify-between text-xs text-neutral-400">
          <span>48 pages</span>
          <span class="font-mono">Aug 2026</span>
        </div>
      </div>
    </div>

    <div>
      <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Free report</p>
      <h2 class="mt-3 text-3xl font-semibold tracking-tight text-neutral-900">What 900 data teams told us about their week</h2>
      <p class="mt-4 leading-relaxed text-neutral-500">
        An anonymous survey run in May and June, with the raw anonymised dataset published alongside it. No vendor scoring, no quadrants.
      </p>

      <ul class="mt-6 space-y-2.5 text-sm text-neutral-700">
        <li 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>Median team spends 31% of the week on pipeline maintenance</span></li>
        <li 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>Teams with a written on-call rota report half the burnout</span></li>
        <li 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>Warehouse spend grew 42% while headcount stayed flat</span></li>
        <li 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>Only 18% can name the owner of every production table</span></li>
      </ul>

      <form class="mt-7 max-w-sm">
        <input type="email" placeholder="[email protected]"
          class="w-full rounded-xl border border-neutral-200 px-4 py-3 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
        <button class="mt-2 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Send me the report</button>
      </form>

      <p class="mt-3 max-w-sm text-xs leading-relaxed text-neutral-500">
        One email with the PDF attached. We will not add you to a nurture sequence, and sales will not see the address.
      </p>
      <p class="mt-3 text-sm">
        <a href="#" class="font-medium text-neutral-900 underline underline-offset-4">Or read the whole thing in your browser</a>
        <span class="text-neutral-400"> — no address needed.</span>
      </p>
    </div>
  </div>
</section>