<div class="bg-gray-100 p-4 lg:p-8 lg:h-screen">
<div class="container mx-auto p-2 lg:p-4 h-full rounded-lg">
<div class="flex rounded-md flex-col justify-center items-center relative p-8 overflow-hidden text-center">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="300" height="240"
viewBox="0 0 505.46625 596.94537" xmlns:xlink="http://www.w3.org/1999/xlink">
<path
d="M706.73312,652.47268l5,96S500.239,547.178,473.89063,488.28153,497.13921,283.694,497.13921,283.694l110.04332,60.44633Z"
transform="translate(-347.26688 -151.52732)" fill="#9f616a" />
<path d="M382.44618,243.39641l-32.548,3.09981s-17.049,37.19774,35.64783,40.29756Z"
transform="translate(-347.26688 -151.52732)" fill="#9f616a" />
<path d="M382.44618,300.74293l-32.548,3.09981s-17.049,37.19774,35.64783,40.29755Z"
transform="translate(-347.26688 -151.52732)" fill="#9f616a" />
<path d="M382.44618,362.73916l-32.548,3.09981s-17.049,37.19774,35.64783,40.29756Z"
transform="translate(-347.26688 -151.52732)" fill="#9f616a" />
<path d="M391.74562,424.7354l-32.548,3.09981s-17.049,37.19774,35.64784,40.29755Z"
transform="translate(-347.26688 -151.52732)" fill="#9f616a" />
<path
d="M366.60044,258.3401h2.46966V190.68455a39.15718,39.15718,0,0,1,39.15715-39.15723H551.56477a39.15718,39.15718,0,0,1,39.15726,39.1571V561.84816a39.15719,39.15719,0,0,1-39.15715,39.15723H408.22744a39.1572,39.1572,0,0,1-39.15731-39.15708V306.49848h-2.46969Z"
transform="translate(-347.26688 -151.52732)" fill="#3f3d56" />
<path
d="M406.64739,161.71467h18.71028a13.8929,13.8929,0,0,0,12.86292,19.13985h82.1162a13.89286,13.89286,0,0,0,12.86291-19.13987h17.47545a29.24215,29.24215,0,0,1,29.24218,29.24211V561.57589a29.24216,29.24216,0,0,1-29.24214,29.24218H406.64739a29.24216,29.24216,0,0,1-29.24218-29.24214h0V190.95679A29.24214,29.24214,0,0,1,406.64739,161.71467Z"
transform="translate(-347.26688 -151.52732)" fill="#fff" />
<rect x="100.53673" y="114.01642" width="61.71533" height="14.89247" fill="#6c63ff"
style="isolation:isolate" />
<rect x="97.59857" y="178.00873" width="67.59164" height="14.89247" fill="#e5e5e5" />
<rect x="55.96534" y="209.9996" width="150.85812" height="14.89247" fill="#e5e5e5" />
<rect x="55.96534" y="241.99047" width="150.85812" height="14.89247" fill="#e5e5e5" />
<path
d="M852.73312,702.47268l-173.48-197.91713-6.19962-127.09228-65.096-108.49341-18.59887-46.49718s-43.39736,4.64972-7.74953,92.99435l14.72411,47.27213,0,0a216.67408,216.67408,0,0,0-20.14876,91.24394v108.3237c0,25.50678,121.55,164.44287,135.69866,185.6658l0,0Z"
transform="translate(-347.26688 -151.52732)" fill="#9f616a" />
<polygon
points="247.195 126.636 260.136 120.276 259.695 119.378 247.738 125.255 229.688 77.932 228.754 78.289 247.195 126.636"
opacity="0.2" />
<rect x="358.98404" y="239.81058" width="1.00012" height="20.43016"
transform="translate(-346.65612 349.39987) rotate(-69.7779)" opacity="0.2" />
<rect x="358.98404" y="297.81058" width="1.00012" height="20.43016"
transform="translate(-401.08099 387.35158) rotate(-69.7779)" opacity="0.2" />
<rect x="358.98404" y="359.81058" width="1.00012" height="20.43016"
transform="translate(-459.25929 427.92066) rotate(-69.7779)" opacity="0.2" />
<rect x="364.06574" y="425.55799" width="0.99981" height="10.35283"
transform="translate(-528.7721 421.49849) rotate(-64.36101)" opacity="0.2" />
<circle cx="131.47081" cy="342.17535" r="43.22999" fill="#6c63ff" />
<polygon
points="127.351 360.424 114.413 343.787 121.937 337.935 128.063 345.812 148.76 323.964 155.681 330.521 127.351 360.424"
fill="#fff" />
</svg>
<h2 class="text-indigo-600 text-3xl mb-4 mt-8 font-bold">Thank you for your order!</h2>
<p class="text-gray-500 mb-6">The order confirmation has been sent to your email address</p>
<a href="javascript:void(0)"
class="group relative w-auto mb-8 flex justify-center py-4 px-8 border border-transparent text-sm font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Back to home
</a>
</div>
</div>
</div>
const ThankYou = () => {
return (
<div className="bg-gray-100 p-4 lg:p-8 lg:h-screen">
<div className="container mx-auto p-2 lg:p-4 h-full rounded-lg">
<div className="flex rounded-md flex-col justify-center items-center relative p-8 overflow-hidden text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
data-name="Layer 1"
width={300}
height={240}
viewBox="0 0 505.46625 596.94537"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
d="M706.73312,652.47268l5,96S500.239,547.178,473.89063,488.28153,497.13921,283.694,497.13921,283.694l110.04332,60.44633Z"
transform="translate(-347.26688 -151.52732)"
fill="#9f616a"
/>
<path
d="M382.44618,243.39641l-32.548,3.09981s-17.049,37.19774,35.64783,40.29756Z"
transform="translate(-347.26688 -151.52732)"
fill="#9f616a"
/>
<path
d="M382.44618,300.74293l-32.548,3.09981s-17.049,37.19774,35.64783,40.29755Z"
transform="translate(-347.26688 -151.52732)"
fill="#9f616a"
/>
<path
d="M382.44618,362.73916l-32.548,3.09981s-17.049,37.19774,35.64783,40.29756Z"
transform="translate(-347.26688 -151.52732)"
fill="#9f616a"
/>
<path
d="M391.74562,424.7354l-32.548,3.09981s-17.049,37.19774,35.64784,40.29755Z"
transform="translate(-347.26688 -151.52732)"
fill="#9f616a"
/>
<path
d="M366.60044,258.3401h2.46966V190.68455a39.15718,39.15718,0,0,1,39.15715-39.15723H551.56477a39.15718,39.15718,0,0,1,39.15726,39.1571V561.84816a39.15719,39.15719,0,0,1-39.15715,39.15723H408.22744a39.1572,39.1572,0,0,1-39.15731-39.15708V306.49848h-2.46969Z"
transform="translate(-347.26688 -151.52732)"
fill="#3f3d56"
/>
<path
d="M406.64739,161.71467h18.71028a13.8929,13.8929,0,0,0,12.86292,19.13985h82.1162a13.89286,13.89286,0,0,0,12.86291-19.13987h17.47545a29.24215,29.24215,0,0,1,29.24218,29.24211V561.57589a29.24216,29.24216,0,0,1-29.24214,29.24218H406.64739a29.24216,29.24216,0,0,1-29.24218-29.24214h0V190.95679A29.24214,29.24214,0,0,1,406.64739,161.71467Z"
transform="translate(-347.26688 -151.52732)"
fill="#fff"
/>
<rect
x="100.53673"
y="114.01642"
width="61.71533"
height="14.89247"
fill="#6c63ff"
style={{ isolation: "isolate" }}
/>
<rect
x="97.59857"
y="178.00873"
width="67.59164"
height="14.89247"
fill="#e5e5e5"
/>
<rect
x="55.96534"
y="209.9996"
width="150.85812"
height="14.89247"
fill="#e5e5e5"
/>
<rect
x="55.96534"
y="241.99047"
width="150.85812"
height="14.89247"
fill="#e5e5e5"
/>
<path
d="M852.73312,702.47268l-173.48-197.91713-6.19962-127.09228-65.096-108.49341-18.59887-46.49718s-43.39736,4.64972-7.74953,92.99435l14.72411,47.27213,0,0a216.67408,216.67408,0,0,0-20.14876,91.24394v108.3237c0,25.50678,121.55,164.44287,135.69866,185.6658l0,0Z"
transform="translate(-347.26688 -151.52732)"
fill="#9f616a"
/>
<polygon
points="247.195 126.636 260.136 120.276 259.695 119.378 247.738 125.255 229.688 77.932 228.754 78.289 247.195 126.636"
opacity="0.2"
/>
<rect
x="358.98404"
y="239.81058"
width="1.00012"
height="20.43016"
transform="translate(-346.65612 349.39987) rotate(-69.7779)"
opacity="0.2"
/>
<rect
x="358.98404"
y="297.81058"
width="1.00012"
height="20.43016"
transform="translate(-401.08099 387.35158) rotate(-69.7779)"
opacity="0.2"
/>
<rect
x="358.98404"
y="359.81058"
width="1.00012"
height="20.43016"
transform="translate(-459.25929 427.92066) rotate(-69.7779)"
opacity="0.2"
/>
<rect
x="364.06574"
y="425.55799"
width="0.99981"
height="10.35283"
transform="translate(-528.7721 421.49849) rotate(-64.36101)"
opacity="0.2"
/>
<circle
cx="131.47081"
cy="342.17535"
r="43.22999"
fill="#6c63ff"
/>
<polygon
points="127.351 360.424 114.413 343.787 121.937 337.935 128.063 345.812 148.76 323.964 155.681 330.521 127.351 360.424"
fill="#fff"
/>
</svg>
<h2 className="text-indigo-600 text-3xl mb-4 mt-8 font-bold">
Thank you for your order!
</h2>
<p className="text-gray-500 mb-6">
The order confirmation has been sent to your email
address
</p>
<a
href="javascript:void(0)"
className="group relative w-auto mb-8 flex justify-center py-4 px-8 border border-transparent text-sm font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Back to home
</a>
</div>
</div>
</div>
);
}
export default ThankYou;
<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;