receipts #01

<section>
  <div class="mx-auto max-w-[450px] px-4 py-12 font-sans">
    <h1 class="text-xl md:text-2xl lg:text-3xl font-medium">
      Thank you for your order!
    </h1>
    <div class="mt-8 space-y-2">
      <p class="text-base text-base-500">
        <span class="font-medium text-black">Order #:</span> 98876248
      </p>
      <p class="text-base text-base-500">
        <span class="font-medium text-black">Date:</span> 29 Dec 2024, 19:55
      </p>
    </div>
    <div class="space-y-3 border-b border-gray-200 py-6">
      <div class="flex justify-between">
        <p class="text-base">Subtotal</p>
        <p class="text-base text-base-600">$149.00</p>
      </div>
      <div class="flex justify-between">
        <p class="text-base">Discount</p>
        <p class="text-base text-base-600">-$81.95</p>
      </div>
      <div class="flex justify-between font-bold">
        <p class="text-base">Total</p>
        <p class="text-base">$67.05</p>
      </div>
    </div>
    <button
      class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-accent-600/20 inset-shadow-white/20 text-shadow-accent-500 ring-accent-600 bg-linear-to-b from-accent-500 to-accent-600 to-70% focus:outline-accent-600 h-12 px-6 py-3 text-base rounded-lg w-full"
    >
      Download your files
    </button>
    <div class="flex gap-2 border-t border-gray-200 py-4 mt-4">
      <a
        class="text-sm text-blue-600 hover:underline"
        href="https://oxbowui.com/support"
      >
        Contact support
      </a>
      <a
        class="text-sm text-blue-600 hover:underline"
        href="https://billing.stripe.com/p/login/fZefZe38O7mhbhC8ww"
      >
        Request an invoice
      </a>
    </div>
  </div>
</section>