<div class="bg-gray-100 p-4 lg:p-8 lg:h-screen">
<div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8 bg-green-300 rounded-lg relative">
<span class="h-16 w-16 text-green-300 bg-gray-100 inline-flex flex-row items-center justify-center rounded-full absolute -top-8 left-0 right-0 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 inline-block text-green-300" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</span>
<div class="pt-8">
<h2 class="px-4 text-center text-2xl font-extrabold text-green-900">
Thank you for your order!
</h2>
<p class="mt-2 text-center text-green-800 px-4">
The order confirmation has been sent to your email address
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-4">
<div class="text-center">
<strong class="font-bold text-lg">$1299.00</strong>
<p class="text-green-800 text-sm">Total amount</p>
</div>
<div class="text-center">
<strong class="font-bold text-lg">x5</strong>
<p class="text-green-800 text-sm">Items Ordered</p>
</div>
<div class="text-center">
<strong class="font-bold text-lg">12-24-2022</strong>
<p class="text-green-800 text-sm">Est. Delivery</p>
</div>
</div>
<p class="p-4 text-center bg-green-200 bg-opacity-75 rounded-bl-lg rounded-br-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block text-green-800" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
Your delivery is CO2 neutral
</p>
</div>
</div>
</div>
const ThankYou = () => {
return (
<div className="bg-gray-100 p-4 lg:p-8 lg:h-screen">
<div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8 bg-green-300 rounded-lg relative">
<span className="h-16 w-16 text-green-300 bg-gray-100 inline-flex flex-row items-center justify-center rounded-full absolute -top-8 left-0 right-0 mx-auto">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-16 w-16 inline-block text-green-300"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
</span>
<div className="pt-8">
<h2 className="px-4 text-center text-2xl font-extrabold text-green-900">
Thank you for your order!
</h2>
<p className="mt-2 text-center text-green-800 px-4">
The order confirmation has been sent to your email
address
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-4">
<div className="text-center">
<strong className="font-bold text-lg">
$1299.00
</strong>
<p className="text-green-800 text-sm">
Total amount
</p>
</div>
<div className="text-center">
<strong className="font-bold text-lg">x5</strong>
<p className="text-green-800 text-sm">
Items Ordered
</p>
</div>
<div className="text-center">
<strong className="font-bold text-lg">
12-24-2022
</strong>
<p className="text-green-800 text-sm">
Est. Delivery
</p>
</div>
</div>
<p className="p-4 text-center bg-green-200 bg-opacity-75 rounded-bl-lg rounded-br-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block text-green-800"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
Your delivery is CO2 neutral
</p>
</div>
</div>
</div>
);
}
export default ThankYou;