Default Order Confirmation

                                        <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-center lg:gap-12 gap-8 inline-flex">
                <div class="w-full flex-col justify-start items-center gap-3 flex">
                    <h2 class="text-center text-gray-900 text-3xl font-bold font-manrope leading-normal">John, Thank You for Your Order!</h2>
                    <div class="justify-center items-center gap-2.5 inline-flex">
                        <h5 class="text-gray-500 text-lg font-normal leading-8">Order ID: #200153 / Order Date: June 23, 2023</h5>
                    </div>
                </div>
                <div class="w-full flex-col justify-start items-center gap-8 flex">
                    <h3 class="w-full md:text-start text-center text-gray-900 text-2xl font-bold font-manrope leading-9">Order Details</h3>
                    <div class="w-full flex-col justify-start items-start gap-5 flex">
                        <div class="w-full flex-col justify-start items-start gap-5 inline-flex border border-gray-200 rounded-2xl lg:p-5 p-4">
                   
                            <ul class="w-full px-6 pb-4 border-b border-gray-200 justify-start items-center md:gap-8 gap-0 md:grid grid-cols-12 hidden">
                                <li class="lg:col-span-4 md:col-span-5 col-span-12 text-gray-900 text-xl font-medium leading-8">Item</li>
                                <div class="lg:col-span-8 md:col-span-7 col-span-12 w-full justify-start items-center gap-8 flex">
                                    <li class="col-span-2 w-full text-center text-gray-900 text-xl font-medium leading-8">Basic Price</li>
                                    <li class="col-span-2 w-full text-center text-gray-900 text-xl font-medium leading-8">Quantity</li>
                                    <li class="col-span-2 w-full text-center text-gray-900 text-xl font-medium leading-8">Total</li>
                                </div>
                            </ul>
                            <div class="w-full flex flex-col gap-5">
                                <div class="grid grid-cols-12 w-full px-6 pb-5 justify-start items-center md:gap-8 gap-3 border-b border-gray-300">
                                    <div class="lg:col-span-4 md:col-span-5 col-span-12 justify-start items-center md:gap-6 gap-3 md:pb-5 flex md:flex-row flex-col">
                                        <img class="object-cover" src="https://pagedone.io/asset/uploads/1715681934.png" alt="Story Book image">
                                        <div class="flex-col justify-start md:items-start items-center gap-1.5 inline-flex">
                                            <h4 class="text-gray-900 text-xl font-medium leading-8">Adventure Story Book</h4>
                                            <h6 class="text-gray-500 text-base font-normal leading-7">Drama, Adventure...</h6>
                                        </div>
                                    </div>
                                    <div class="lg:col-span-8 md:col-span-7 col-span-12 w-full justify-start items-center md:gap-8 gap-3 flex md:flex-row flex-col">
                                        <h5 class="md:col-span-2 col-span-12 w-full text-center text-gray-500 text-lg font-medium leading-8">$52.00</h5>
                                        <input type="text" class="md:col-span-2 col-span-12 w-full focus:outline-none text-center text-gray-900 placeholder-gray-500 text-lg font-medium leading-8" placeholder="1">
                                        <h5 class="md:col-span-2 col-span-12 w-full flex justify-center text-center text-gray-900 text-lg font-medium leading-8">$52.00</h5>
                                    </div>
                                </div>
                                <div class="grid grid-cols-12 w-full px-6 pb-5 justify-start items-center md:gap-8 gap-3">
                                    <div class="lg:col-span-4 md:col-span-5 col-span-12 justify-start items-center md:gap-6 gap-3 flex md:flex-row flex-col">
                                        <img class="object-cover" src="https://pagedone.io/asset/uploads/1715681946.png" alt="Travelling Backpack image">
                                        <div class="flex-col justify-start md:items-start items-center gap-1.5 inline-flex">
                                            <h4 class="text-gray-900 text-xl font-medium leading-8">Travelling Backpack</h4>
                                            <h6 class="text-gray-500 text-base font-normal leading-7">Leather Material...</h6>
                                        </div>
                                    </div>
                                    <div class="lg:col-span-8 md:col-span-7 col-span-12 w-full justify-start items-center md:gap-8 gap-3 flex md:flex-row flex-col">
                                        <h5 class="md:col-span-2 col-span-12 w-full text-center text-gray-500 text-lg font-medium leading-8">$60.00</h5>
                                        <input type="text" class="md:col-span-2 col-span-12 w-full focus:outline-none text-center text-gray-900 placeholder-gray-500 text-lg font-medium leading-8" placeholder="2">
                                        <h5 class="md:col-span-2 col-span-12 w-full flex justify-center text-center text-gray-900 text-lg font-medium leading-8">$120.00</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full lg:p-5 p-4 rounded-2xl border border-gray-200 flex-col justify-start items-start gap-5 flex">
                            <div class="w-full px-5 pb-6 border-b border-gray-200 flex-col justify-start items-start gap-6 flex">
                                <div class="w-full justify-between items-start gap-6 inline-flex">
                                    <h5 class="text-gray-500 text-lg font-normal leading-8">Subtotal</h5>
                                    <h5 class="text-right text-gray-900 text-lg font-semibold leading-8">$172.00</h5>
                                </div>
                                <div class="w-full justify-between items-start gap-6 inline-flex">
                                    <h5 class="text-gray-500 text-lg font-normal leading-8">Shipping</h5>
                                    <h5 class="text-right text-gray-900 text-lg font-semibold leading-8">$20.00</h5>
                                </div>
                            </div>
                            <div class="px-5 pb-6 border-b border-gray-100 w-full justify-between items-start gap-6 inline-flex">
                                <h5 class="text-indigo-600 text-xl font-semibold leading-8">Total</h5>
                                <h5 class="text-right text-indigo-600 text-xl font-semibold leading-8">$192.00</h5>
                            </div>
                        </div>
                    </div>
                    <div class="w-full justify-end items-center gap-5 flex sm:flex-row flex-col">
                        <button class="md:w-fit w-full px-5 py-2.5 bg-indigo-50 hover:bg-indigo-100 transition-all duration-700 ease-in-out rounded-xl justify-center items-center flex">
                            <span class="px-2 py-px text-indigo-600 text-base font-semibold leading-relaxed">View Order Details</span>              
                        </button>
                        <button class="md:w-fit w-full px-5 py-2.5 bg-indigo-600 hover:bg-indigo-800 transition-all duration-700 ease-in-out rounded-xl shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] justify-center items-center flex">
                            <span class="px-2 py-px text-white text-base font-semibold leading-relaxed">Track My Order</span>            
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>