Referral Card

<!--
  Day 123: Referral card

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Referral Card -->
<div
  class="mx-auto w-full max-w-md rounded-3xl bg-white p-6 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
  <!-- Header -->
  <div class="flex items-start gap-3">
    <div
      class="flex size-11 flex-none items-center justify-center rounded-2xl bg-linear-to-br from-zinc-800 to-zinc-950 text-white shadow-sm ring-1 ring-white/10 ring-inset"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="hi-mini hi-gift inline-block size-5"
      >
        <path
          fill-rule="evenodd"
          d="M14 6a2.5 2.5 0 0 0-4-3 2.5 2.5 0 0 0-4 3H3.25C2.56 6 2 6.56 2 7.25v.5C2 8.44 2.56 9 3.25 9h6V6h1.5v3h6C17.44 9 18 8.44 18 7.75v-.5C18 6.56 17.44 6 16.75 6H14Zm-1-1.5a1 1 0 0 1-1 1h-1v-1a1 1 0 1 1 2 0Zm-6 0a1 1 0 0 0 1 1h1v-1a1 1 0 0 0-2 0Z"
          clip-rule="evenodd"
        />
        <path
          d="M9.25 10.5H3v4.75A2.75 2.75 0 0 0 5.75 18h3.5v-7.5ZM10.75 18v-7.5H17v4.75A2.75 2.75 0 0 1 14.25 18h-3.5Z"
        />
      </svg>
    </div>
    <div class="min-w-0 grow">
      <h3 class="text-base font-semibold text-zinc-900">
        Invite friends, earn credits
      </h3>
      <p class="mt-0.5 text-xs text-zinc-500">
        Both of you get
        <span class="font-semibold text-zinc-900">$10</span> when they join.
      </p>
    </div>
  </div>
  <!-- END Header -->

  <!-- Link -->
  <div class="mt-5">
    <label
      for="referral-link"
      class="text-[11px] font-semibold tracking-wider text-zinc-500 uppercase"
    >
      Your referral link
    </label>
    <div class="mt-2 flex items-stretch gap-2">
      <div
        class="flex min-w-0 grow items-center gap-2 rounded-2xl border border-zinc-200 bg-zinc-50 px-3.5"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-link inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
          <path
            fill-rule="evenodd"
            d="M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z"
            clip-rule="evenodd"
          />
        </svg>
        <input
          id="referral-link"
          type="text"
          readonly
          value="taildrops.com/r/john"
          class="block w-full truncate bg-transparent py-2.5 text-sm font-medium text-zinc-900 focus:outline-hidden"
        />
      </div>
      <button
        type="button"
        class="inline-flex flex-none items-center gap-1.5 rounded-2xl bg-zinc-900 px-4 text-xs font-semibold text-white hover:bg-zinc-700 active:bg-zinc-800"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-clipboard-document inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937v-2.523a2.5 2.5 0 0 0-.732-1.768L8.354 5.232A2.5 2.5 0 0 0 6.586 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
            clip-rule="evenodd"
          />
          <path
            d="M3 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-3.586a1 1 0 0 0-.293-.707L7.293 6.293A1 1 0 0 0 6.586 6H3Z"
          />
        </svg>
        <span>Copy</span>
      </button>
    </div>
  </div>
  <!-- END Link -->

  <!-- Share -->
  <div class="mt-4 flex items-center gap-3">
    <span class="text-xs font-medium text-zinc-500">Share via</span>
    <div class="flex items-center gap-1.5">
      <button
        type="button"
        aria-label="Share by email"
        class="flex size-8 items-center justify-center rounded-full text-zinc-600 ring-1 ring-zinc-200 ring-inset hover:bg-zinc-50 hover:text-zinc-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-envelope inline-block size-4"
        >
          <path
            d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
          />
          <path
            d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
          />
        </svg>
      </button>
      <button
        type="button"
        aria-label="Share on X"
        class="flex size-8 items-center justify-center rounded-full text-zinc-600 ring-1 ring-zinc-200 ring-inset hover:bg-zinc-50 hover:text-zinc-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          class="inline-block size-4"
        >
          <path
            d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z"
          />
        </svg>
      </button>
      <button
        type="button"
        aria-label="Share on WhatsApp"
        class="flex size-8 items-center justify-center rounded-full text-zinc-600 ring-1 ring-zinc-200 ring-inset hover:bg-zinc-50 hover:text-zinc-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          class="inline-block size-4"
        >
          <path
            d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.626.712.226 1.36.194 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347Zm-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884Zm8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"
          />
        </svg>
      </button>
      <button
        type="button"
        aria-label="More share options"
        class="flex size-8 items-center justify-center rounded-full text-zinc-600 ring-1 ring-zinc-200 ring-inset hover:bg-zinc-50 hover:text-zinc-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-ellipsis-horizontal inline-block size-4"
        >
          <path
            d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
          />
        </svg>
      </button>
    </div>
  </div>
  <!-- END Share -->

  <!-- Reward -->
  <div class="mt-6 rounded-2xl border border-zinc-100 bg-zinc-50/70 p-4">
    <div class="flex items-center justify-between gap-3">
      <p class="text-xs font-semibold text-zinc-900">
        Unlock a free month at 5 invites
      </p>
      <span
        class="inline-flex items-center gap-1 rounded-full bg-white px-2 py-0.5 text-xs font-semibold text-indigo-700 ring-1 ring-indigo-200/70 ring-inset"
      >
        3 / 5
      </span>
    </div>
    <div class="mt-3 flex items-center gap-1.5" aria-hidden="true">
      <span class="h-1.5 grow rounded-full bg-indigo-500"></span>
      <span class="h-1.5 grow rounded-full bg-indigo-500"></span>
      <span class="h-1.5 grow rounded-full bg-indigo-500"></span>
      <span class="h-1.5 grow rounded-full bg-zinc-200"></span>
      <span class="h-1.5 grow rounded-full bg-zinc-200"></span>
    </div>
    <p class="mt-3 text-[11px] text-zinc-500">
      Two more friends and your next month is on us.
    </p>
  </div>
  <!-- END Reward -->

  <!-- Stats -->
  <dl class="mt-4 grid grid-cols-3 gap-2 text-center">
    <div class="rounded-2xl border border-zinc-100 bg-white p-3">
      <dt
        class="text-[10px] font-semibold tracking-wider text-zinc-500 uppercase"
      >
        Sent
      </dt>
      <dd class="mt-1 text-lg font-bold text-zinc-900">12</dd>
    </div>
    <div class="rounded-2xl border border-zinc-100 bg-white p-3">
      <dt
        class="text-[10px] font-semibold tracking-wider text-zinc-500 uppercase"
      >
        Joined
      </dt>
      <dd class="mt-1 text-lg font-bold text-zinc-900">3</dd>
    </div>
    <div class="rounded-2xl border border-zinc-100 bg-white p-3">
      <dt
        class="text-[10px] font-semibold tracking-wider text-zinc-500 uppercase"
      >
        Earned
      </dt>
      <dd class="mt-1 text-lg font-bold text-emerald-600">$30</dd>
    </div>
  </dl>
  <!-- END Stats -->
</div>
<!-- END Referral Card -->