receipts #01

<section>
  <div class="mx-auto max-w-[450px] px-4 py-12 font-sans">
    <h1
      class="text-lg leading-tight sm: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 leading-normal text-base-500">
        <span class="font-medium text-black">Order #:</span> 98876248
      </p>
      <p class="text-base leading-normal 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 leading-normal">Subtotal</p>
        <p class="text-base leading-normal text-base-600">$149.00</p>
      </div>
      <div class="flex justify-between">
        <p class="text-base leading-normal">Discount</p>
        <p class="text-base leading-normal text-base-600">-$81.95</p>
      </div>
      <div class="flex justify-between font-bold">
        <p class="text-base leading-normal">Total</p>
        <p class="text-base leading-normal">$67.05</p>
      </div>
    </div>
    <button
      class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-accent-600 hover:bg-accent-700 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 leading-normal text-blue-600 hover:underline"
        href="https://oxbowui.com/support"
      >
        Contact support
      </a>
      <a
        class="text-sm leading-normal text-blue-600 hover:underline"
        href="https://billing.stripe.com/p/login/fZefZe38O7mhbhC8ww"
      >
        Request an invoice
      </a>
    </div>
  </div>
</section>