Referral link CTA

Build a referral call-to-action with Tailwind CSS. Use a max-w-3xl rounded-2xl card with a neutral-900 left rail on md and up carrying a rotated or stacked label, or simply a two-part layout: a top block with a gift-like glyph tile, a heading reading "Give a month, get a month", and a supporting line explaining both sides get credit. Below, a copy row: a bordered rounded-xl field showing the referral URL in monospace with the domain part muted, and a dark Copy button on the right that swaps to a green Copied state. Under the row, three small share buttons for email, X and LinkedIn drawn as bordered pills with glyphs. Then a progress block: a label with invites accepted out of five, a thin neutral-100 track with a neutral-900 fill at forty percent, and a muted line saying two more unlock the next reward. Then add JavaScript that copies the link, flips the button state for two seconds, and selects the field text on click.

<section class="mx-auto max-w-3xl px-6 py-16">
  <div class="rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm">
    <div class="flex items-start gap-4">
      <span class="grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-neutral-900 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="m12 3 1.15 3.1a4 4 0 0 0 2.36 2.36L18.6 9.6l-3.09 1.15a4 4 0 0 0-2.36 2.36L12 16.2l-1.15-3.09a4 4 0 0 0-2.36-2.36L5.4 9.6l3.09-1.14a4 4 0 0 0 2.36-2.36L12 3Z"/><path d="m18.5 15 .55 1.45a2 2 0 0 0 1.18 1.18l1.47.55-1.47.55a2 2 0 0 0-1.18 1.18l-.55 1.47-.55-1.47a2 2 0 0 0-1.18-1.18l-1.47-.55 1.47-.55a2 2 0 0 0 1.18-1.18L18.5 15Z"/></svg></span>
      <div>
        <h2 class="text-xl font-semibold tracking-tight text-neutral-900">Give a month, get a month</h2>
        <p class="mt-1.5 text-sm leading-relaxed text-neutral-500">Anyone who signs up through your link starts with 30 free days — and the same credit lands on your account when they do.</p>
      </div>
    </div>

    <div class="mt-7 flex flex-col gap-2 sm:flex-row">
      <input id="referralField" readonly value="https://northwind.app/r/rae-8f21"
        class="min-w-0 flex-1 rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-3 font-mono text-sm text-neutral-900 outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <button id="referralCopy" class="shrink-0 rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Copy link</button>
    </div>

    <div class="mt-4 flex flex-wrap gap-2">
      <a href="#" class="flex items-center gap-2 rounded-full border border-neutral-200 px-3.5 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-50"><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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg> Email</a>
      <a href="#" class="flex items-center gap-2 rounded-full border border-neutral-200 px-3.5 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-50"><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> Post</a>
      <a href="#" class="flex items-center gap-2 rounded-full border border-neutral-200 px-3.5 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-50"><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> Share</a>
    </div>

    <div class="mt-8 border-t border-neutral-200 pt-6">
      <div class="flex items-center justify-between text-sm">
        <span class="font-medium text-neutral-900">2 of 5 invites accepted</span>
        <span class="text-neutral-500">2 months credited</span>
      </div>
      <div class="mt-3 h-2 overflow-hidden rounded-full bg-neutral-100">
        <div class="h-full w-2/5 rounded-full bg-neutral-900"></div>
      </div>
      <p class="mt-2.5 text-xs text-neutral-400">Two more and we upgrade you to Team for a year.</p>
    </div>
  </div>
</section>

var field = document.getElementById("referralField");
var btn = document.getElementById("referralCopy");

function flash() {
  btn.textContent = "Copied";
  btn.classList.add("bg-green-600", "hover:bg-green-600");
  setTimeout(function () {
    btn.textContent = "Copy link";
    btn.classList.remove("bg-green-600", "hover:bg-green-600");
  }, 2000);
}

btn.addEventListener("click", function () {
  navigator.clipboard.writeText(field.value).then(flash, function () {
    // Clipboard API can be blocked; selecting the text still lets people copy.
    field.select();
  });
});

field.addEventListener("click", function () {
  field.select();
});