Referral Card

<!--
  A referral share card. The read-only code field and the copy button stack on
  mobile so nothing overflows at 320px. The clipboard write and the "Copied!"
  state live in the React/TS variants; an aria-live line announces the copy.
-->
<section class="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 text-center dark:border-gray-800 dark:bg-gray-900">
  <span class="mx-auto inline-flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-pink-500 to-rose-500 text-white">
    <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
      <path d="M20 12v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8M2 7h20v5H2zM12 21V7" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
  </span>
  <h2 class="mt-4 text-lg font-bold tracking-tight text-gray-900 dark:text-gray-100">Give $20, get $20</h2>
  <p class="mt-1.5 text-sm text-gray-600 dark:text-gray-400">Share your code. When a friend subscribes, you both get account credit.</p>
  <div class="mt-5 flex flex-col gap-2 sm:flex-row">
    <label for="referral-code" class="sr-only">Your referral code</label>
    <input
      id="referral-code"
      type="text"
      readonly
      value="FRIEND-4KQ9"
      class="min-w-0 flex-1 rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-2.5 text-center font-mono text-sm tracking-widest text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus-visible:ring-blue-400"
    />
    <button type="button" class="whitespace-nowrap rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
      Copy code
    </button>
  </div>
</section>