Payment Method Card

<!--
  Day 102: Payment Method 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
-->

<!-- Payment Method Card -->
<div
  class="relative mx-auto w-full max-w-sm rounded-3xl border border-zinc-200 bg-white p-6 ring-4 ring-zinc-300/25"
>
  <!-- Card Header -->
  <div class="flex items-center justify-between">
    <h3 class="text-lg font-semibold text-zinc-900">Payment Methods</h3>
    <button
      type="button"
      class="rounded-lg px-2 py-1.5 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-800"
      aria-label="Add new payment method"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="hi-mini hi-plus inline-block size-5"
      >
        <path
          d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
        />
      </svg>
    </button>
  </div>
  <!-- END Card Header -->

  <!-- Payment Cards -->
  <div
    class="mt-4 flex flex-col gap-4 rounded-2xl border border-dotted border-indigo-200/75 bg-indigo-50 p-4"
  >
    <!-- Default Card -->
    <div class="relative overflow-hidden rounded-xl bg-indigo-600 p-4">
      <div class="flex items-start justify-between">
        <div>
          <p class="text-sm font-medium text-white/80">Primary Card</p>
          <p class="mt-1 text-lg font-semibold text-white">•••• 4242</p>
        </div>
        <div class="flex items-center gap-1">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 32 32"
            fill="currentColor"
            class="w-12 text-white"
          >
            <path
              d="m15.854 11.329-2.003 9.367h-2.424l2.006-9.367zm10.197 6.048 1.275-3.518.735 3.518zm2.703 3.319h2.242l-1.956-9.367h-2.079c-.459 0-.853.281-1.019.68l-.003.007-3.635 8.68h2.544l.506-1.4h3.109zm-6.325-3.058c.01-2.473-3.419-2.609-3.395-3.714.008-.336.327-.694 1.027-.785a4.55 4.55 0 0 1 2.417.431l-.027-.012.425-1.987a6.383 6.383 0 0 0-2.266-.416h-.001c-2.396 0-4.081 1.275-4.096 3.098-.015 1.348 1.203 2.099 2.122 2.549.945.459 1.262.754 1.257 1.163-.006.63-.752.906-1.45.917l-.109.001a5.047 5.047 0 0 1-2.407-.606l.027.013-.439 2.052a7.178 7.178 0 0 0 2.651.497h.045-.002c2.546 0 4.211-1.257 4.22-3.204zm-10.038-6.309-3.926 9.367H5.903l-1.932-7.477a1.028 1.028 0 0 0-.57-.82l-.006-.003a9.872 9.872 0 0 0-2.325-.786l-.066-.011.058-.271h4.125a1.13 1.13 0 0 1 1.115.948l.001.006 1.021 5.421 2.522-6.376z"
            />
          </svg>
        </div>
      </div>
      <div class="mt-10 flex items-center justify-between">
        <span class="text-xs font-medium text-white/80">Expires 12/28</span>
        <span
          class="inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white"
        >
          Default
        </span>
      </div>
    </div>
    <!-- END Default Card -->

    <!-- Secondary Card -->
    <div class="flex items-center justify-between rounded-xl bg-indigo-100 p-4">
      <div class="flex items-center gap-3">
        <div
          class="flex size-10 flex-none items-center justify-center rounded-lg bg-white"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="hi-mini hi-credit-card inline-block size-5 text-zinc-600"
          >
            <path
              fill-rule="evenodd"
              d="M2.5 4A1.5 1.5 0 0 0 1 5.5V6h18v-.5A1.5 1.5 0 0 0 17.5 4h-15ZM19 8.5H1v6A1.5 1.5 0 0 0 2.5 16h15a1.5 1.5 0 0 0 1.5-1.5v-6ZM3 13.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Zm4.75-.75a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div>
          <p class="font-medium text-zinc-900">•••• 8888</p>
          <p class="mt-0.5 text-xs font-medium text-zinc-600">Expires 09/27</p>
        </div>
      </div>
      <button
        type="button"
        class="rounded-lg p-2 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-800"
        aria-label="More options"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="hi-mini hi-ellipsis-horizontal inline-block size-5"
        >
          <path
            d="M3 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM8.5 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM15.5 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
          />
        </svg>
      </button>
    </div>
    <!-- END Secondary Card -->
  </div>
  <!-- END Payment Cards -->

  <!-- Action Button -->
  <button
    type="button"
    class="mt-6 flex w-full items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-center text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:ring-2 focus:ring-indigo-500/50 focus:ring-offset-2 focus:outline-none active:bg-zinc-100"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      class="hi-mini hi-plus inline-block size-5 opacity-50"
    >
      <path
        d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
      />
    </svg>
    <span>Add new card</span>
  </button>
</div>
<!-- END Payment Method Card -->