Tailwind CSS Order Confirmation

Default Order Confirmation

This Tailwind Order Confirmation example shows invoice of purchased items and follow up buttons to track the order or return shopping after successfully finishing payment.

Preview
Code

Figma File

                                                <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>

HTML Copy

Order confirmation with message

Use this Tailwind CSS Order Confirmation to show special message of surity that your placed order is been confirmed with the list of purchased items and total amount to be paid.

Preview
Code

Figma File

                                                <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-start gap-8 inline-flex">
                <div class="w-full flex-col justify-start items-start lg:gap-14 gap-8 flex">
                    <div class="w-full text-center text-black text-3xl font-bold font-manrope leading-normal">Order  Confirmation</div>
                    <div class="flex-col justify-start items-start gap-3 flex">
                        <h4 class="text-black text-xl font-medium leading-8">Hello, John smith</h4>
                        <h5 class="text-gray-500 text-lg font-normal leading-8">Thank you for shopping</h5>
                        <h5 class="text-gray-500 text-lg font-normal leading-8">Your order has been confirmed and will be shipped within two days.</h5>
                    </div>
                </div>
                <div class="w-full justify-center items-start ">
                    <div class="w-full hidden md:grid grid-cols-2 p-4 bg-gray-50">
                        <span class="text-gray-500 text-base font-normal leading-relaxed">Product</span>
                        <p class="flex items-center justify-between">
                            <span class="w-full max-w-[200px] text-center px-8 text-gray-500 text-base font-normal leading-relaxed ">Size</span>
                            <span class="w-full max-w-[260px] text-center px-8 text-gray-500 text-base font-normal leading-relaxed ">Quantity</span>
                            <span class="w-full max-w-[200px] text-center px-8 text-gray-500 text-base font-normal leading-relaxed ">Price</span>
                            <span class="w-full max-w-[200px] text-center"></span>
                        </p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 min-[550px]:gap-6 py-3 border-b border-gray-200 max-sm:max-w-xl max-xl:mx-auto">
                        <div class="flex items-center flex-col min-[550px]:flex-row gap-3 min-[550px]:gap-4 w-full max-sm:justify-center max-sm:max-w-xl max-xl:mx-auto">
                            <div class="w-[120px] h-[120px] img-box bg-gray-50 rounded-xl justify-center items-center inline-flex">
                                <img src="https://pagedone.io/asset/uploads/1713334568.png" alt="Denim Shirt image" class="xl:w-[75px] object-cover">
                            </div>
                            <div class="pro-data w-full max-w-sm flex-col justify-start items-start gap-2 inline-flex">
                                <h4 class="w-full text-black text-lg font-medium leading-8 max-[550px]:text-center">Top for Women</h4>
                                <h5 class="w-full text-gray-500 text-base font-normal leading-relaxed min-[550px]:my-0 my-2 max-[550px]:text-center">Product ID: 4553458120</h5>
                            </div>
                        </div>
                        <div class="w-full flex items-center justify-between flex-col min-[550px]:flex-row w-full max-sm:max-w-xl max-xl:mx-auto gap-2">
                            <h5 class="w-full max-w-[142px] text-center text-black text-lg font-medium leading-relaxed">L</h5>
                            <button class="max-w-[160px] flex items-center w-full mx-0 justify-center gap-5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M18 12H6" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
                                </svg>
                                <input type="text" class="w-12 h-12 focus:outline-none text-gray-900 placeholder-gray-900 text-lg font-medium leading-relaxed px-2.5 bg-white rounded-full border border-gray-200 justify-center items-center flex" placeholder="02">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 6V18M18 12H6" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
                                </svg>
                            </button>
                            <h5 class="max-w-[142px] w-full text-center text-black text-lg font-medium leading-relaxed pl-5">$50.00</h5>
                            <button class="group max-w-[176px] text-center w-full flex items-center justify-center transition-all duration-700 ease-in-out">
                                <svg class="text-gray-500 group-hover:text-gray-900 transition-all duration-700 ease-in-out" class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                <g filter="url(#filter0_d_484_1442)">
                                <path d="M13.5 13.5L26.5 26.5M26.5 13.5L13.5 26.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
                                </g>
                                <defs>
                                <filter id="filter0_d_484_1442" x="-2" y="-1" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                                <feOffset dy="1"></feOffset>
                                <feGaussianBlur stdDeviation="1"></feGaussianBlur>
                                <feComposite in2="hardAlpha" operator="out"></feComposite>
                                <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"></feColorMatrix>
                                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_484_1442"></feBlend>
                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_484_1442" result="shape"></feBlend>
                                </filter>
                                </defs>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 min-[550px]:gap-6 py-3 border-b border-gray-200 max-sm:max-w-xl max-xl:mx-auto">
                        <div class="flex items-center flex-col min-[550px]:flex-row gap-3 min-[550px]:gap-4 w-full max-sm:justify-center max-sm:max-w-xl max-xl:mx-auto">
                            <div class="w-[120px] h-[120px] img-box bg-gray-50 rounded-xl justify-center items-center inline-flex">
                                <img src="https://pagedone.io/asset/uploads/1713334581.png" alt="Blue T-shirt for Men image" class="xl:w-[75px] object-cover">
                            </div>
                            <div class="pro-data w-full max-w-sm flex-col justify-start items-start gap-2 inline-flex">
                                <h4 class="w-full text-black text-lg font-medium leading-8 max-[550px]:text-center">Blue T-shirt for Men</h4>
                                <h5 class="w-full text-gray-500 text-base font-normal leading-relaxed min-[550px]:my-0 my-2 max-[550px]:text-center">Product ID: 8953458747</h5>
                            </div>
                        </div>
                        <div class="flex items-center justify-between flex-col min-[550px]:flex-row w-full max-sm:max-w-xl max-xl:mx-auto gap-2">
                            <h5 class="w-full max-w-[142px] text-center text-black text-lg font-medium leading-relaxed">M</h5>
                            <button class="max-w-[160px] flex items-center w-full mx-0 justify-center gap-5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M18 12H6" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
                                </svg>
                                <input type="text" class="w-12 h-12 focus:outline-none text-gray-900 placeholder-gray-900 text-lg font-medium leading-relaxed px-2.5 bg-white rounded-full border border-gray-200 justify-center items-center flex" placeholder="02">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 6V18M18 12H6" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
                                </svg>
                            </button>
                            <h5 class="max-w-[142px] w-full text-center text-black text-lg font-medium leading-relaxed pl-5">$50.00</h5>
                            <button class="group max-w-[176px] text-center w-full flex items-center justify-center transition-all duration-700 ease-in-out">
                                <svg class="text-gray-500 group-hover:text-gray-900 transition-all duration-700 ease-in-out" class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                <g filter="url(#filter0_d_484_1442)">
                                <path d="M13.5 13.5L26.5 26.5M26.5 13.5L13.5 26.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
                                </g>
                                <defs>
                                <filter id="filter0_d_484_1442" x="-2" y="-1" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                                <feOffset dy="1"></feOffset>
                                <feGaussianBlur stdDeviation="1"></feGaussianBlur>
                                <feComposite in2="hardAlpha" operator="out"></feComposite>
                                <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"></feColorMatrix>
                                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_484_1442"></feBlend>
                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_484_1442" result="shape"></feBlend>
                                </filter>
                                </defs>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="w-full p-5 rounded-xl border border-gray-200 flex-col justify-start items-center gap-4 flex">
                    <div class="w-full justify-between items-center gap-6 inline-flex">
                        <h5 class="text-gray-600 text-lg font-normal leading-8">Subtotal:</h5>
                        <h5 class="text-right text-gray-900 text-lg font-semibold leading-8">$ 100.00</h5>
                    </div>
                    <div class="w-full justify-between items-center gap-6 inline-flex">
                        <h5 class="text-gray-600 text-lg font-normal leading-8">Delivery:</h5>
                        <h5 class="text-right text-gray-900 text-lg font-semibold leading-8">Free</h5>
                    </div>
                    <div class="w-full justify-between items-center gap-6 inline-flex">
                        <h5 class="text-gray-600 text-lg font-normal leading-8">Total:</h5>
                        <h5 class="text-right text-gray-900 text-lg font-semibold leading-8">₹100.00</h5>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Order Confirmation with CTA

following example shows order confirmation message with invoice of purchased and track order and back shopping CTA buttons after finishing payment.

Preview
Code

Figma File

                                                <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="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>
                    <p class="max-w-xl text-center text-gray-500 text-lg font-normal leading-8">Your order is in good hands! We'll notify you once it's en route. For now, here's a snapshot of your purchase</p>
                </div>
                <div class="w-full flex-col justify-start items-center lg:gap-10 gap-8 flex">
                    <div class="w-full flex-col justify-start items-start gap-6 flex">
                        <div class="w-full flex-col justify-start items-start gap-5 flex">
                            <div class="w-full md:px-6 px-2 py-4 border-y border-gray-200 justify-between items-center inline-flex">
                                <h3 class="text-gray-900 text-xl font-medium leading-8">Item</h3>
                                <h3 class="text-right text-gray-900 text-xl font-medium leading-8">Total</h3>
                            </div>
                            <div class="w-full md:px-6 px-2 pb-5 justify-between items-center gap-8 inline-flex border-b border-gray-300">
                                <div class="justify-start items-center gap-6 flex md:pb-5">
                                    <img class="object-cover" src="https://pagedone.io/asset/uploads/1717406948.png" alt="Simple Black T-shirt image" />
                                    <div class="flex-col justify-start items-start gap-1.5 inline-flex">
                                        <h5 class="text-gray-900 text-lg font-semibold leading-relaxed">Simple Black T-shirt</h5>
                                        <h6 class="text-gray-500 text-base font-normal leading-relaxed">QTY: 1</h6>
                                    </div>
                                </div>
                                <h4 class="text-right text-gray-900 text-lg font-medium leading-relaxed">$52.00</h4>
                            </div>
                            <div class="w-full md:px-5 px-2 pb-6 justify-between items-center gap-8 inline-flex border-b border-gray-300">
                                <div class="justify-start items-center gap-6 flex md:pb-6">
                                    <img class="object-cover" src="https://pagedone.io/asset/uploads/1717406998.png" alt="White Woolen Girl’s Top image" />
                                    <div class="flex-col justify-start items-start gap-1.5 inline-flex">
                                        <h4 class="text-gray-900 text-xl font-medium leading-8">White Woolen Girl’s Top</h4>
                                        <h6 class="text-gray-500 text-base font-normal leading-relaxed">QTY : 2</h6>
                                    </div>
                                </div>
                                <h4 class="text-right text-gray-900 text-lg font-medium leading-relaxed">$120.00</h4>
                            </div>
                        </div>
                        <div class="w-full md:pt-6 justify-start items-center gap-5 flex md:flex-row flex-col">
                            <div class="w-full md:px-6 px-2 flex-col justify-start items-start gap-5 inline-flex md:border-r md:border-b-0 border-b md:pb-0 pb-5 border-gray-200">
                                <div class="w-full justify-between items-center inline-flex gap-4">
                                    <h5 class="text-gray-500 text-lg font-normal leading-relaxed">Estimated Delivery:</h5>
                                    <h5 class="text-right text-gray-500 text-lg font-normal leading-relaxed">Friday, 3rd Jun 2023</h5>
                                </div>
                                <div class="w-full justify-between items-center inline-flex gap-4 border-y border-gray-200 py-5">
                                    <h5 class="text-gray-500 text-lg font-normal leading-relaxed">Delivery Address:</h5>
                                    <h5 class="text-right text-gray-500 text-lg font-normal leading-relaxed">123 Main Street Anytown, USA</h5>
                                </div>
                                <div class="w-full justify-between items-center inline-flex gap-4">
                                    <h5 class="text-gray-500 text-lg font-normal leading-relaxed">Payment Method</h5>
                                    <h5 class="text-right text-gray-500 text-lg font-normal leading-relaxed">COD</h5>
                                </div>
                            </div>
                            <div class="w-full md:px-6 px-2 flex-col justify-start items-start gap-5 inline-flex">
                                <div class="w-full 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-relaxed">Subtotal</h5>
                                        <h5 class="text-right text-gray-900 text-lg font-semibold leading-relaxed">$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-relaxed">Shipping</h5>
                                        <h5 class="text-right text-gray-900 text-lg font-semibold leading-relaxed">$20.00</h5>
                                    </div>
                                </div>
                                <div class="w-full justify-between items-start gap-6 inline-flex">
                                    <h4 class="text-indigo-600 text-xl font-semibold leading-8">Total</h4>
                                    <h4 class="text-right text-indigo-600 text-xl font-semibold leading-8">$192.00</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-full justify-center items-center gap-8 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">Back to Shopping</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>

HTML Copy

Progress Steps Order Confirmation

Below example can be used to show progress steps of your purchased order such as shipping, payment, summary and confirmation after successful payment process.

Preview
Code

Figma File

Order confirmation with order details

This example shows complete steps of placed order such as estimate arrival time of order, purchased items list with billing details.

Preview
Code

Figma File

Side by side Order Confirmation

Following example of Tailwind Order Confirmation shows list of purchased items and order summary such as subtotal, delivery, tax etc in a side by side layout.

Preview
Code

Figma File

Order Confirmation Component with scanner

This example shows Order confirmation message, order details with list of purchased items and invoice with scanner. You can also show order details by scanning qr code.

Preview
Code

Figma File

Order Confirmation with stepper

Following example shows steps of order such as order details, shipping, delivery info and tracking info with invoice at the bottom.

Preview
Code

Figma File

Order Confirmation with order status

Below example shows all the details of order such as billing info, shipping info, delivery info, order details and an overview of the products purchased as a confirmation of a successful online payment.

Preview
Code

Figma File

Order Confirmation with image

This example shows list of orders with image of product. It also shows address and payment details.

Preview
Code

Figma File