Discount Code Card

<!--
  Day 120: Discount code 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
-->

<!-- Discount Code Card -->
<div
  class="mx-auto flex w-full max-w-md flex-col gap-6 overflow-hidden rounded-3xl bg-white p-6 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
  <!-- Banner -->
  <div class="relative overflow-hidden bg-zinc-800 p-6">
    <!-- Decorative shapes -->
    <span
      aria-hidden="true"
      class="absolute -top-12 -right-10 size-40 rounded-full bg-white/10 blur-2xl"
    ></span>
    <span
      aria-hidden="true"
      class="absolute -bottom-16 -left-8 size-44 rounded-full bg-white/10 blur-2xl"
    ></span>
    <!-- END Decorative shapes -->

    <!-- Notch cut -->
    <span
      aria-hidden="true"
      class="absolute -top-3 -left-3 size-6 rounded-full bg-white"
    ></span>
    <span
      aria-hidden="true"
      class="absolute -top-3 -right-3 size-6 rounded-full bg-white"
    ></span>
    <span
      aria-hidden="true"
      class="absolute -bottom-3 -left-3 size-6 rounded-full bg-white"
    ></span>
    <span
      aria-hidden="true"
      class="absolute -right-3 -bottom-3 size-6 rounded-full bg-white"
    ></span>
    <!-- END Notch cut -->

    <div class="relative flex items-start justify-between gap-4">
      <div>
        <span
          class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] font-semibold tracking-wider text-white uppercase ring-1 ring-white/15 backdrop-blur-sm"
        >
          Limited offer
        </span>
        <p class="mt-3 text-3xl font-black text-white">25% off</p>
        <p class="mt-1 text-sm text-white/80">your next subscription</p>
      </div>
      <div
        class="flex size-12 flex-none items-center justify-center rounded-xl text-white ring-1 ring-white/15 backdrop-blur-sm ring-inset"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-tag inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M4.5 2A2.5 2.5 0 0 0 2 4.5v2.879a2.5 2.5 0 0 0 .732 1.767l4.5 4.5a2.5 2.5 0 0 0 3.536 0l2.878-2.878a2.5 2.5 0 0 0 0-3.536l-4.5-4.5A2.5 2.5 0 0 0 7.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </div>
  </div>
  <!-- END Banner -->

  <!-- Body -->
  <div class="relative">
    <!-- Code -->
    <div class="flex flex-col gap-2">
      <p class="text-xs font-medium text-zinc-500">Use this code at checkout</p>
      <div
        class="flex items-center justify-between gap-3 rounded-2xl border border-dashed border-zinc-300 bg-zinc-50 px-4 py-3"
      >
        <span
          class="font-mono text-base font-bold tracking-widest text-zinc-900"
          >SPRING25OFF</span
        >
        <button
          type="button"
          aria-label="Copy code"
          class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-xs font-semibold text-zinc-900 hover:bg-zinc-50 active:bg-white"
        >
          Copy
        </button>
      </div>
    </div>
    <!-- END Code -->

    <!-- Meta -->
    <ul
      class="mt-6 flex flex-col gap-2 border-t border-dashed border-zinc-200 pt-6"
    >
      <li class="flex items-center gap-2.5 text-sm text-zinc-600">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-calendar inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z"
            clip-rule="evenodd"
          />
        </svg>
        <span>Valid through May 31, 2026</span>
      </li>
      <li class="flex items-center gap-2.5 text-sm text-zinc-600">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-user-circle inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-5-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 9c-1.825 0-3.422.977-4.295 2.437A5.49 5.49 0 0 0 8 13.5a5.49 5.49 0 0 0 4.294-2.063A4.997 4.997 0 0 0 8 9Z"
            clip-rule="evenodd"
          />
        </svg>
        <span>One use per customer, on annual plans</span>
      </li>
    </ul>
    <!-- END Meta -->

    <!-- CTA -->
    <a
      href="javascript:void(0)"
      class="mt-6 inline-flex w-full items-center justify-center gap-1.5 rounded-xl bg-zinc-800 px-4 py-2.5 text-sm font-semibold text-white hover:bg-zinc-700 active:bg-zinc-800"
    >
      <span>Redeem now</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="hi-micro hi-arrow-right inline-block size-4 opacity-50"
      >
        <path
          fill-rule="evenodd"
          d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
    <!-- END CTA -->
  </div>
  <!-- END Body -->
</div>
<!-- END Discount Code Card -->