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="py-6 border-b border-gray-200 space-y-3">
      <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 font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 outline outline-accent-500 hover:bg-blue-600 focus:outline-accent-600 shadow-sm h-12 px-6 py-3 text-lg rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full"
    >
      Download your files
    </button>
    <div class="flex py-4 mt-4 border-t border-gray-200 gap-2">
      <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>