Tailwind CSS Order Tracking

Default order tracking

Following this example to show a timeline of the status of a product ordered from an e-commerce website after the purchase has been completed by the customer.

Preview
Code

Figma File

                                                <section class="py-24 relative bg-gray-100">
        <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-12 inline-flex">
                <div class="w-full justify-between items-center flex sm:flex-row flex-col gap-3">
                    <div class="w-full flex-col justify-center sm:items-start items-center gap-1 inline-flex">
                        <h2 class="text-gray-500 text-2xl font-semibold font-manrope leading-9">Order
                            <span class="text-indigo-600">#125103</span>
                        </h2>
                        <span class="text-gray-500 text-base font-medium leading-relaxed">May 21, 2023</span>
                    </div>
                    <button
                        class="sm:w-fit w-full px-3.5 py-2 bg-indigo-600 hover:bg-indigo-800 transition-all duration-700 ease-in-out rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] justify-center items-center flex">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                            <path
                                d="M14.25 9V5.25C14.25 3.83579 14.25 3.12868 13.8107 2.68934C13.3713 2.25 12.6642 2.25 11.25 2.25H6.75C5.33579 2.25 4.62868 2.25 4.18934 2.68934C3.75 3.12868 3.75 3.83579 3.75 5.25V9M6.75 5.25H11.25M6.75 7.5H11.25M12 12.2143C12 12.0151 12 11.9155 12.0188 11.8331C12.0829 11.5522 12.3022 11.3329 12.5831 11.2688C12.6655 11.25 12.7651 11.25 12.9643 11.25H14.25C14.9571 11.25 15.3107 11.25 15.5303 11.4697C15.75 11.6893 15.75 12.0429 15.75 12.75V14.25C15.75 14.9571 15.75 15.3107 15.5303 15.5303C15.3107 15.75 14.9571 15.75 14.25 15.75H3.75C3.04289 15.75 2.68934 15.75 2.46967 15.5303C2.25 15.3107 2.25 14.9571 2.25 14.25V12.75C2.25 12.0429 2.25 11.6893 2.46967 11.4697C2.68934 11.25 3.04289 11.25 3.75 11.25H5.03571C5.23491 11.25 5.3345 11.25 5.41689 11.2688C5.69776 11.3329 5.91709 11.5522 5.9812 11.8331C6 11.9155 6 12.0151 6 12.2143C6 12.4135 6 12.5131 6.0188 12.5955C6.08291 12.8763 6.30224 13.0957 6.58311 13.1598C6.6655 13.1786 6.76509 13.1786 6.96429 13.1786H11.0357C11.2349 13.1786 11.3345 13.1786 11.4169 13.1598C11.6978 13.0957 11.9171 12.8763 11.9812 12.5955C12 12.5131 12 12.4135 12 12.2143Z"
                                stroke="white" stroke-width="1.6" stroke-linecap="round" />
                        </svg>
                        <span class="px-1.5 text-white text-sm font-medium leading-6 whitespace-nowrap">Print
                            Invoice</span>
                    </button>
                </div>
                <div class="w-full justify-end items-start gap-8 inline-flex">
                    <div class="w-full flex-col justify-start items-start gap-8 inline-flex">
                        <div class="w-full p-8 bg-white rounded-xl flex-col justify-start items-start gap-5 flex">
                            <h2
                                class="w-full text-gray-900 text-2xl font-semibold font-manrope leading-9 pb-5 border-b border-gray-200">
                                Oder Tracking</h2>
                            <div class="w-full flex-col justify-center items-center">
                                <ol
                                    class="flex md:flex-row flex-col md:items-start items-center justify-between w-full md:gap-1 gap-4">
                                    <li
                                        class="group flex relative justify-start after:content-[''] lg:after:w-11 md:after:w-5 after:w-5 after:h-0.5 md:after:border after:border-dashed md:after:bg-gray-500 after:inline-block after:absolute md:after:top-7 after:top-3 xl:after:left-44 lg:after:left-40 md:after:left-36">
                                        <div
                                            class="w-full mr-1 block z-10 flex flex-col items-center justify-start gap-1">
                                            <div class="justify-center items-center gap-1.5 inline-flex">
                                                <h5
                                                    class="text-center text-gray-900 text-lg font-medium leading-normal">
                                                    Oder Placed</h5>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 20 20" fill="none">
                                                    <path
                                                        d="M9.10815 11.2157C9.10815 11.2157 9.11044 11.2147 9.11433 11.2141C9.10997 11.2157 9.10815 11.2157 9.10815 11.2157Z"
                                                        fill="#047857" />
                                                    <path
                                                        d="M9.13686 11.2157C9.13686 11.2157 9.13456 11.2147 9.13068 11.2141C9.13331 11.2151 9.136 11.2157 9.136 11.2157L9.13686 11.2157Z"
                                                        fill="#047857" />
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                        d="M1.83337 9.99992C1.83337 5.48959 5.48972 1.83325 10 1.83325C14.5104 1.83325 18.1667 5.48959 18.1667 9.99992C18.1667 14.5102 14.5104 18.1666 10 18.1666C5.48972 18.1666 1.83337 14.5102 1.83337 9.99992ZM14.3635 7.92721C14.6239 7.66687 14.6239 7.24476 14.3635 6.98441C14.1032 6.72406 13.6811 6.72406 13.4207 6.98441L9.82961 10.5755C9.53851 10.8666 9.3666 11.0365 9.22848 11.1419C9.17307 11.1842 9.13961 11.2029 9.1225 11.2107C9.1054 11.2029 9.07194 11.1842 9.01653 11.1419C8.87841 11.0365 8.7065 10.8666 8.4154 10.5755L7.13815 9.29825C6.8778 9.03791 6.45569 9.03791 6.19534 9.29825C5.93499 9.55861 5.93499 9.98071 6.19534 10.2411L7.50018 11.5459C7.75408 11.7999 7.98968 12.0355 8.20775 12.2019C8.44909 12.3861 8.74554 12.5469 9.1225 12.5469C9.49946 12.5469 9.79592 12.3861 10.0373 12.2019C10.2553 12.0355 10.4909 11.7999 10.7448 11.5459L14.3635 7.92721Z"
                                                        fill="#047857" />
                                                </svg>
                                            </div>
                                            <h6 class="text-center text-gray-500 text-base font-normal leading-relaxed">
                                                20 May, 2024</h6>
                                        </div>
                                    </li>
                                    <li
                                        class="group flex relative justify-start after:content-[''] lg:after:w-11 md:after:w-5 after:w-5 after:h-0.5 md:after:border after:border-dashed md:after:bg-gray-500 after:inline-block after:absolute md:after:top-7 after:top-3 xl:after:left-44 lg:after:left-40 md:after:left-32">
                                        <div
                                            class="w-full mr-1 block z-10 flex flex-col items-center justify-start gap-1">
                                            <div class="justify-center items-center gap-1.5 inline-flex">
                                                <h5
                                                    class="text-center text-gray-900 text-lg font-medium leading-normal">
                                                    Picked</h5>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 20 20" fill="none">
                                                    <path
                                                        d="M9.10815 11.2157C9.10815 11.2157 9.11044 11.2147 9.11433 11.2141C9.10997 11.2157 9.10815 11.2157 9.10815 11.2157Z"
                                                        fill="#047857" />
                                                    <path
                                                        d="M9.13686 11.2157C9.13686 11.2157 9.13456 11.2147 9.13068 11.2141C9.13331 11.2151 9.136 11.2157 9.136 11.2157L9.13686 11.2157Z"
                                                        fill="#047857" />
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                        d="M1.83337 9.99992C1.83337 5.48959 5.48972 1.83325 10 1.83325C14.5104 1.83325 18.1667 5.48959 18.1667 9.99992C18.1667 14.5102 14.5104 18.1666 10 18.1666C5.48972 18.1666 1.83337 14.5102 1.83337 9.99992ZM14.3635 7.92721C14.6239 7.66687 14.6239 7.24476 14.3635 6.98441C14.1032 6.72406 13.6811 6.72406 13.4207 6.98441L9.82961 10.5755C9.53851 10.8666 9.3666 11.0365 9.22848 11.1419C9.17307 11.1842 9.13961 11.2029 9.1225 11.2107C9.1054 11.2029 9.07194 11.1842 9.01653 11.1419C8.87841 11.0365 8.7065 10.8666 8.4154 10.5755L7.13815 9.29825C6.8778 9.03791 6.45569 9.03791 6.19534 9.29825C5.93499 9.55861 5.93499 9.98071 6.19534 10.2411L7.50018 11.5459C7.75408 11.7999 7.98968 12.0355 8.20775 12.2019C8.44909 12.3861 8.74554 12.5469 9.1225 12.5469C9.49946 12.5469 9.79592 12.3861 10.0373 12.2019C10.2553 12.0355 10.4909 11.7999 10.7448 11.5459L14.3635 7.92721Z"
                                                        fill="#047857" />
                                                </svg>
                                            </div>
                                            <h6 class="text-center text-gray-500 text-base font-normal leading-relaxed">
                                                22 May, 2024</h6>
                                        </div>
                                    </li>
                                    <li
                                        class="group flex relative justify-start after:content-[''] lg:after:w-11 md:after:w-5 after:w-5 after:h-0.5 md:after:border after:border-dashed md:after:bg-gray-500 after:inline-block after:absolute md:after:top-7 after:top-3 xl:after:left-44 lg:after:left-40 md:after:left-32">
                                        <div
                                            class="w-full mr-1 block z-10 flex flex-col items-center justify-start gap-1">
                                            <div class="justify-center items-center gap-1.5 inline-flex">
                                                <h5
                                                    class="text-center text-gray-900 text-lg font-medium leading-normal">
                                                    Packed</h5>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 20 20" fill="none">
                                                    <path
                                                        d="M9.10815 11.2157C9.10815 11.2157 9.11044 11.2147 9.11433 11.2141C9.10997 11.2157 9.10815 11.2157 9.10815 11.2157Z"
                                                        fill="#047857" />
                                                    <path
                                                        d="M9.13686 11.2157C9.13686 11.2157 9.13456 11.2147 9.13068 11.2141C9.13331 11.2151 9.136 11.2157 9.136 11.2157L9.13686 11.2157Z"
                                                        fill="#047857" />
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                        d="M1.83337 9.99992C1.83337 5.48959 5.48972 1.83325 10 1.83325C14.5104 1.83325 18.1667 5.48959 18.1667 9.99992C18.1667 14.5102 14.5104 18.1666 10 18.1666C5.48972 18.1666 1.83337 14.5102 1.83337 9.99992ZM14.3635 7.92721C14.6239 7.66687 14.6239 7.24476 14.3635 6.98441C14.1032 6.72406 13.6811 6.72406 13.4207 6.98441L9.82961 10.5755C9.53851 10.8666 9.3666 11.0365 9.22848 11.1419C9.17307 11.1842 9.13961 11.2029 9.1225 11.2107C9.1054 11.2029 9.07194 11.1842 9.01653 11.1419C8.87841 11.0365 8.7065 10.8666 8.4154 10.5755L7.13815 9.29825C6.8778 9.03791 6.45569 9.03791 6.19534 9.29825C5.93499 9.55861 5.93499 9.98071 6.19534 10.2411L7.50018 11.5459C7.75408 11.7999 7.98968 12.0355 8.20775 12.2019C8.44909 12.3861 8.74554 12.5469 9.1225 12.5469C9.49946 12.5469 9.79592 12.3861 10.0373 12.2019C10.2553 12.0355 10.4909 11.7999 10.7448 11.5459L14.3635 7.92721Z"
                                                        fill="#047857" />
                                                </svg>
                                            </div>
                                            <h6 class="text-center text-gray-500 text-base font-normal leading-relaxed">
                                                23 May, 2024</h6>
                                        </div>
                                    </li>
                                    <li
                                        class="group flex relative justify-start after:content-[''] lg:after:w-11 md:after:w-5 after:w-5 after:h-0.5 md:after:border after:border-dashed md:after:bg-gray-500 after:inline-block after:absolute md:after:top-7 after:top-3 xl:after:left-44 lg:after:left-40 md:after:left-[155px]">
                                        <div
                                            class="w-full mr-1 block z-10 flex flex-col items-center justify-start gap-1">
                                            <div class="justify-center items-center gap-1.5 inline-flex">
                                                <h5
                                                    class="text-center text-gray-900 text-lg font-medium leading-normal whitespace-nowrap">
                                                    Oder Shipped</h5>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 20 20" fill="none">
                                                    <path
                                                        d="M9.10815 11.2157C9.10815 11.2157 9.11044 11.2147 9.11433 11.2141C9.10997 11.2157 9.10815 11.2157 9.10815 11.2157Z"
                                                        fill="#047857" />
                                                    <path
                                                        d="M9.13686 11.2157C9.13686 11.2157 9.13456 11.2147 9.13068 11.2141C9.13331 11.2151 9.136 11.2157 9.136 11.2157L9.13686 11.2157Z"
                                                        fill="#047857" />
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                        d="M1.83337 9.99992C1.83337 5.48959 5.48972 1.83325 10 1.83325C14.5104 1.83325 18.1667 5.48959 18.1667 9.99992C18.1667 14.5102 14.5104 18.1666 10 18.1666C5.48972 18.1666 1.83337 14.5102 1.83337 9.99992ZM14.3635 7.92721C14.6239 7.66687 14.6239 7.24476 14.3635 6.98441C14.1032 6.72406 13.6811 6.72406 13.4207 6.98441L9.82961 10.5755C9.53851 10.8666 9.3666 11.0365 9.22848 11.1419C9.17307 11.1842 9.13961 11.2029 9.1225 11.2107C9.1054 11.2029 9.07194 11.1842 9.01653 11.1419C8.87841 11.0365 8.7065 10.8666 8.4154 10.5755L7.13815 9.29825C6.8778 9.03791 6.45569 9.03791 6.19534 9.29825C5.93499 9.55861 5.93499 9.98071 6.19534 10.2411L7.50018 11.5459C7.75408 11.7999 7.98968 12.0355 8.20775 12.2019C8.44909 12.3861 8.74554 12.5469 9.1225 12.5469C9.49946 12.5469 9.79592 12.3861 10.0373 12.2019C10.2553 12.0355 10.4909 11.7999 10.7448 11.5459L14.3635 7.92721Z"
                                                        fill="#047857" />
                                                </svg>
                                            </div>
                                            <h6 class="text-center text-gray-500 text-base font-normal leading-relaxed">
                                                28 May, 2024</h6>
                                        </div>
                                    </li>
                                    <li class="group flex relative justify-start">
                                        <div class="w-full block z-10 flex flex-col items-center justify-start gap-1">
                                            <div class="justify-center items-center gap-1.5 inline-flex">
                                                <h5
                                                    class="text-center text-gray-500 text-lg font-medium leading-normal">
                                                    Oder Delivered</h5>
                                            </div>
                                            <h6 class="text-center text-gray-500 text-base font-normal leading-relaxed">
                                                2 Jun, 2024</h6>
                                        </div>
                                    </li>
                                </ol>
                            </div>
                        </div>
                        <div class="w-full p-8 bg-white rounded-xl flex-col justify-start items-start gap-5 flex">
                            <h2
                                class="w-full text-gray-900 text-2xl font-semibold font-manrope leading-9 pb-5 border-b border-gray-200">
                                Order Items</h2>
                            <div
                                class="w-full flex-col justify-start items-start gap-5 flex pb-5 border-b border-gray-200">
                                <div
                                    class="w-full justify-start items-center lg:gap-8 gap-4 grid md:grid-cols-12 grid-cols-1">
                                    <div
                                        class="md:col-span-8 col-span-12 w-full justify-start items-center lg:gap-5 gap-4 flex md:flex-row flex-col">
                                        <img class="rounded-md object-cover" src="https://pagedone.io/asset/uploads/1718189222.png"
                                            alt="Pure Cotton T-Shirt image" />
                                        <div
                                            class="w-full flex-col justify-start md:items-start items-center gap-3 inline-flex">
                                            <h4 class="text-gray-900 text-xl font-medium leading-8">Pure Cotton Regular
                                                Fit T-Shirt</h4>
                                            <div
                                                class="flex-col justify-start md:items-start items-center gap-0.5 flex">
                                                <h6
                                                    class="text-gray-500 text-base font-normal leading-relaxed whitespace-nowrap">
                                                    Size: M</h6>
                                                <h6 class="text-gray-500 text-base font-normal leading-relaxed">Color:
                                                    White</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="md:col-span-4 col-span-12 justify-between items-center gap-4 flex md:flex-row flex-col">
                                        <h4 class="text-gray-500 text-xl font-semibold leading-8">$40 x 2</h4>
                                        <h4 class="text-gray-900 text-xl font-semibold leading-8">$80</h4>
                                    </div>
                                </div>
                                <div
                                    class="w-full justify-start items-center lg:gap-8 gap-4 grid md:grid-cols-12 grid-cols-1">
                                    <div
                                        class="md:col-span-8 col-span-12 w-full justify-start items-center lg:gap-5 gap-4 flex md:flex-row flex-col">
                                        <img class="rounded-md object-cover" src="https://pagedone.io/asset/uploads/1718189265.png"
                                            alt="Men Stretchable Jeans image" />
                                        <div
                                            class="w-full flex-col justify-start md:items-start items-center gap-3 inline-flex">
                                            <h4 class="text-gray-900 text-xl font-medium leading-8">Men Skinny Fit
                                                Stretchable Jeans</h4>
                                            <div
                                                class="flex-col justify-start md:items-start items-center gap-0.5 flex">
                                                <h6 class="text-gray-500 text-base font-normal leading-relaxed">Size: 32
                                                </h6>
                                                <h6 class="text-gray-500 text-base font-normal leading-relaxed">Color:
                                                    Blue</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="md:col-span-4 col-span-12 justify-between items-center gap-4 flex md:flex-row flex-col">
                                        <h4 class="text-gray-500 text-xl font-semibold leading-8">$52 x 1</h4>
                                        <h4 class="text-gray-900 text-xl font-semibold leading-8">$52</h4>
                                    </div>
                                </div>
                                <div
                                    class="w-full justify-start items-center lg:gap-8 gap-4 grid md:grid-cols-12 grid-cols-1">
                                    <div
                                        class="md:col-span-8 col-span-12 justify-start items-center lg:gap-5 gap-4 flex md:flex-row flex-col">
                                        <img class="rounded-md object-cover" src="https://pagedone.io/asset/uploads/1718189276.png"
                                            alt="Men Cotton Casual Shirt image" />
                                        <div
                                            class="flex-col justify-start md:items-start items-center gap-3 inline-flex">
                                            <h4 class="text-gray-900 text-xl font-medium leading-8">Men Checked Cotton
                                                Casual Shirt</h4>
                                            <div
                                                class="flex-col justify-start md:items-start items-center gap-0.5 flex">
                                                <h6 class="text-gray-500 text-base font-normal leading-relaxed">Size: M
                                                </h6>
                                                <h6 class="text-gray-500 text-base font-normal leading-relaxed">Color:
                                                    Dark Blue</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="md:col-span-4 col-span-12 justify-between items-center gap-4 flex md:flex-row flex-col">
                                        <h4 class="text-gray-500 text-xl font-semibold leading-8">$22 x 1</h4>
                                        <h4 class="text-gray-900 text-xl font-semibold leading-8">$22</h4>
                                    </div>
                                </div>
                                <div
                                    class="w-full justify-start items-center lg:gap-8 gap-4 grid md:grid-cols-12 grid-cols-1 pb-2.5">
                                    <div
                                        class="md:col-span-8 col-span-12 justify-start items-center lg:gap-5 gap-4 flex md:flex-row flex-col">
                                        <img class="rounded-md object-cover" src="https://pagedone.io/asset/uploads/1718189288.png"
                                            alt="Men Colourblocked PU Sneakers image" />
                                        <div
                                            class="flex-col justify-start md:items-start items-center gap-3 inline-flex">
                                            <h4 class="text-gray-900 text-xl font-medium leading-8">Men Colourblocked PU
                                                Sneakers</h4>
                                            <div
                                                class="flex-col justify-start md:items-start items-center gap-0.5 flex">
                                                <h6 class="text-gray-500 text-base font-normal leading-relaxed">Size: 38
                                                </h6>
                                                <h6 class="text-gray-500 text-base font-normal leading-relaxed">Color:
                                                    Green & Gray</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="md:col-span-4 col-span-12 justify-between items-center gap-4 flex md:flex-row flex-col">
                                        <h4 class="text-gray-500 text-xl font-semibold leading-8">$56 x 1</h4>
                                        <h4 class="text-gray-900 text-xl font-semibold leading-8">$56</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full flex-col justify-start items-start gap-5 flex">
                                <div class="w-full pb-1.5 flex-col justify-start items-start gap-4 flex">
                                    <div class="w-full justify-between items-start gap-6 inline-flex">
                                        <h6 class="text-gray-500 text-base font-normal leading-relaxed">Subtotal</h6>
                                        <h6 class="text-right text-gray-500 text-base font-medium leading-relaxed">
                                            $210.00</h6>
                                    </div>
                                    <div class="w-full justify-between items-start gap-6 inline-flex">
                                        <h6 class="text-gray-500 text-base font-normal leading-relaxed">Shipping Charge
                                        </h6>
                                        <h6 class="text-right text-gray-500 text-base font-medium leading-relaxed">
                                            $10.00</h6>
                                    </div>
                                    <div class="w-full justify-between items-start gap-6 inline-flex">
                                        <h6 class="text-gray-500 text-base font-normal leading-relaxed">Tax Fee</h6>
                                        <h6 class="text-right text-gray-500 text-base font-medium leading-relaxed">
                                            $22.00</h6>
                                    </div>
                                </div>
                                <div class="w-full justify-between items-start gap-6 inline-flex">
                                    <h5 class="text-gray-900 text-lg font-semibold leading-relaxed">Total</h5>
                                    <h5 class="text-right text-gray-900 text-lg font-semibold leading-relaxed">$242.00
                                    </h5>
                                </div>
                            </div>
                        </div>
                        <div class="w-full flex-col justify-start items-start gap-1.5 flex">
                            <h6 class="text-right text-gray-900 text-base font-medium leading-relaxed">Order Note:</h6>
                            <p class="text-gray-500 text-sm font-normal leading-normal">Make sure to ship all the
                                ordered items together by Friday. I've emailed you the details, so please check it an
                                review it. Thank You!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Order tracking with horizontal steps

This Tailwind Order tracking example shows order tracking with horizontal steps, where you can track your order status with detailed steps like order confirmed, shipping and delivery estimates.

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 lg:gap-10 gap-8 inline-flex">
                <h2 class="text-center text-black text-3xl font-bold font-manrope leading-normal">Order Tracking</h2>
                <div class="w-full flex-col justify-start items-start gap-3 flex">
                    <h3 class="text-gray-900 text-2xl font-semibold font-manrope leading-9">Order Details:
                        <span class="font-medium ">#1025400025</span>
                    </h3>
                    <h4 class="text-gray-600 text-xl font-medium leading-loose">Date: 10-04-2024</h4>
                </div>
                <div class="w-full flex-col justify-center sm:items-center items-start gap-8 flex">
                    <ol class="flex sm:items-center items-start w-full sm:gap-0 gap-3">
                        <li
                            class="flex w-full relative justify-center text-indigo-600 text-base font-semibold after:content-['']  after:w-full after:h-0.5 after:border after:border-dashed after:bg-indigo-600 after:inline-block after:absolute lg:after:top-5 after:top-3 xl:after:left-52 lg:after:left-48 md:after:left-36 sm:after:left-28 after:left-20">
                            <div class="block sm:whitespace-nowrap z-10 flex flex-col items-center">
                                <span
                                    class="w-6 h-6 bg-indigo-600 text-center border-2 border-transparent rounded-full flex justify-center items-center mx-auto mb-1 text-base font-bold text-white lg:w-10 lg:h-10">1</span>
                                Order Confirmed <br>
                                <span class="text-indigo-600 text-base font-normal text-center">8:00 AM, Feb
                                    8,2024</span>
                            </div>
                        </li>
                        <li
                            class="flex w-full relative justify-center text-black text-base font-semibold after:content-['']  after:w-full after:h-0.5 after:border after:border-dashed after:bg-indigo-200 after:inline-block after:absolute lg:after:top-5 after:top-3 xl:after:left-52 lg:after:left-48 md:after:left-36 sm:after:left-28 after:left-20">
                            <div class="block sm:whitespace-nowrap z-10 flex flex-col items-center">
                                <span
                                    class="w-6 h-6 bg-indigo-600 rounded-full flex justify-center items-center mx-auto mb-1 text-white text-base font-bold lg:w-10 lg:h-10">2</span>
                                Shipping
                                <span class="text-gray-500 text-base font-normal text-center">Shipped with FedEX</span>
                            </div>
                        </li>
                        <li class="flex w-full relative justify-center text-gray-500 text-base font-semibold">
                            <div class="block sm:whitespace-nowrap z-10 flex flex-col items-center">
                                <span
                                    class="w-6 h-6 text-indigo-600 border-2 bg-transparent border-indigo-600 rounded-full flex justify-center items-center mx-auto mb-1 text-sm lg:w-10 lg:h-10">3</span>
                                To Deliver
                                <span class="text-gray-500 text-base font-normal text-center">Estimated date: Feb 15,
                                </span>
                            </div>
                        </li>
                    </ol>
                </div>
                <div class="w-full flex-col justify-start items-start gap-8 flex">
                    <div class="w-full justify-start items-start lg:gap-8 gap-4 flex sm:flex-row flex-col">
                        <div class="w-full flex-col justify-start items-start flex gap-1.5">
                            <label class="text-gray-600 text-base font-medium leading-relaxed">Courier Name</label>
                            <input type="text"
                                class="w-full focus:outline-none px-5 py-3 h-14 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-200 text-gray-900 placeholder-gray-400 text-lg font-normal leading-relaxed"
                                placeholder="Engle Express">
                        </div>
                        <div class="w-full flex-col justify-start items-start flex gap-1.5">
                            <label class="text-gray-600 text-base font-medium leading-relaxed">Tracking Number</label>
                            <input type="text"
                                class="w-full focus:outline-none px-5 py-3 h-14 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-200 text-gray-900 placeholder-gray-400 text-lg font-normal leading-relaxed"
                                placeholder="#125410215452">
                        </div>
                    </div>
                    <div class="w-full flex-col justify-start items-start flex gap-1.5">
                        <label class="text-gray-600 text-base font-medium leading-relaxed">Shipment tracking URL</label>
                        <input type="text"
                            class="w-full focus:outline-none px-5 py-3 h-14 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-200 text-gray-900 placeholder-gray-400 text-lg font-normal leading-relaxed"
                            placeholder="https://www.shipmentlink.com/TDB1_CargoTracking.do">
                    </div>
                </div>
                <div class="w-full flex-col justify-start items-start gap-7 flex">
                    <h3 class="text-indigo-600 text-2xl font-semibold font-manrope leading-9">Item Ordered</h3>
                    <div class="w-full justify-start items-start flex flex-col">
                        <div class="w-full hidden lg:grid grid-cols-2 p-4 bg-gray-50">
                            <span class="text-gray-500 text-base font-normal leading-relaxed">Product</span>
                            <p
                                class="text-gray-500 text-base font-normal leading-relaxed flex items-center justify-between">
                                <span class="w-full max-w-[300px] text-center pl-5">Quantity</span>
                                <span class="w-full max-w-[300px] text-center pl-10">Price</span>
                                <span class="w-full max-w-[105px] text-center"></span>
                            </p>
                        </div>
                        <div
                            class="w-full grid grid-cols-1 lg:grid-cols-2 min-[550px]:gap-6 py-3 border-b border-gray-200 max-lg: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-xl:justify-center max-xl:max-w-xl max-xl:mx-auto">
                                <img src="https://pagedone.io/asset/uploads/1712126548.png" alt="Homiboss Chair image"
                                    class="w-[120px] rounded-xl object-cover">

                                <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-relaxed max-[550px]:text-center">
                                        Homiboss Chair</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="flex items-center flex-col min-[550px]:flex-row w-full max-xl:max-w-xl max-xl:mx-auto gap-2">
                                <button class="max-w-[300px] 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-11 h-11 focus:outline-none text-gray-900 placeholder-gray-900 text-lg font-medium leading-8 px-2.5 bg-white rounded-full border border-gray-200 justify-center items-center flex"
                                        placeholder="01">
                                    <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>
                                <h4
                                    class="max-w-[300px] w-full text-center text-black text-lg font-medium leading-relaxed pl-5">
                                    $50.00</h4>
                                <button class="max-w-[105px] text-center w-full ">
                                    <svg class="text-gray-500 hover:text-gray-800 transition-all duration-700 ease-in-out mx-auto"
                                        xmlns="http://www.w3.org/2000/svg" width="27" height="26" viewBox="0 0 27 26"
                                        fill="none">
                                        <path d="M7 6.5L20 19.5M20 6.5L7 19.5" stroke="currentColor" stroke-width="1.6"
                                            stroke-linecap="round" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div
                            class="w-full grid grid-cols-1 lg:grid-cols-2 min-[550px]:gap-6 py-3 border-b border-gray-200 max-lg: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-xl:justify-center max-xl:max-w-xl max-xl:mx-auto">
                                <img src="https://pagedone.io/asset/uploads/1712126556.png" alt="Maharaja Chair image"
                                    class="w-[120px] rounded-xl object-cover">

                                <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-relaxed max-[550px]:text-center">
                                        Maharaja Chair</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 flex-col min-[550px]:flex-row w-full max-xl:max-w-xl max-xl:mx-auto gap-2">
                                <button class="max-w-[300px] 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-11 h-11 focus:outline-none text-gray-900 placeholder-gray-900 text-lg font-medium leading-8 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>
                                <h4
                                    class="max-w-[300px] w-full text-center text-black text-lg font-medium leading-relaxed pl-5">
                                    $100.00</h4>
                                <button class="max-w-[105px] text-center w-full ">
                                    <svg class="text-gray-500 hover:text-gray-800 transition-all duration-700 ease-in-out mx-auto"
                                        xmlns="http://www.w3.org/2000/svg" width="27" height="26" viewBox="0 0 27 26"
                                        fill="none">
                                        <path d="M7 6.5L20 19.5M20 6.5L7 19.5" stroke="currentColor" stroke-width="1.6"
                                            stroke-linecap="round" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full rounded-xl flex-col justify-start items-start gap-6 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">
                            <h4 class="text-gray-500 text-xl font-normal leading-8">Subtotal</h4>
                            <h4 class="text-right text-gray-900 text-xl font-semibold leading-8">$250.00</h4>
                        </div>
                        <div class="w-full justify-between items-start gap-6 inline-flex">
                            <h4 class="text-gray-500 text-xl font-normal leading-8">Shipping Charge</h4>
                            <h4 class="text-right text-gray-900 text-xl font-semibold leading-8">$30.00</h4>
                        </div>
                    </div>
                    <div class="w-full pb-6 border-b border-gray-200 justify-between items-start gap-6 inline-flex">
                        <h3 class="text-gray-900 text-2xl font-semibold font-manrope leading-9">Total</h3>
                        <h3 class="text-right text-indigo-600 text-2xl font-bold font-manrope leading-9">$280.00</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Order tracking with CTA

This example shows order tracking process with CTA buttons, where you can download invoice of orders. It also shows order details with images of purchased items.

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 gap-10 inline-flex">
                <div class="w-full flex-col justify-start items-center gap-4 flex">
                    <h2 class="w-full text-center text-black text-3xl font-bold font-manrope leading-normal">Order Tracking</h2>
                    <p class="max-w-4xl text-center text-gray-500 text-base font-normal leading-relaxed">Order tracking is a service provided by companies to allow customers to monitor the progress and location of their purchases from the time they are placed until they are delivered.</p>
                </div>
                <div class="w-full flex-col justify-start items-start gap-10 flex">
                    <div class="w-full justify-between items-center flex sm:flex-row flex-col gap-3">
                        <h3 class="text-gray-900 text-2xl font-semibold font-manrope leading-9">Order Details</h3>
                        <button class="sm:w-fit w-full px-5 py-2.5 bg-indigo-600 hover:bg-indigo-800 transition-all duration-700 ease-in-out rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] justify-center items-center flex">
                            <span class="px-2 py-px text-center text-white text-base font-semibold leading-relaxed">Download Invoice</span>
                        </button>
                    </div>
                    <div class="w-full py-6 border-t border-b border-gray-100 md:justify-between justify-center md:items-start items-center md:gap-8 gap-10 flex flex-wrap">
                        <div class="flex-col justify-start items-start gap-3 inline-flex">
                            <h6 class="text-gray-500 text-base font-normal leading-relaxed">Order Number</h6>
                            <h4 class="text-black text-xl font-semibold leading-8">#2315482546</h4>
                        </div>
                        <div class="flex-col justify-start items-start gap-3 inline-flex">
                            <h6 class="text-gray-500 text-base font-normal leading-relaxed">Order Placed</h6>
                            <h4 class="text-black text-xl font-semibold leading-8">Feb 20, 2024</h4>
                        </div>
                        <div class="flex-col justify-start items-start gap-3 inline-flex">
                            <h6 class="text-gray-500 text-base font-normal leading-relaxed">Order Delivared</h6>
                            <h4 class="text-black text-xl font-semibold leading-8">Feb 20, 2024</h4>
                        </div>
                        <div class="flex-col justify-start items-start gap-3 inline-flex">
                            <h6 class="text-gray-500 text-base font-normal leading-relaxed">No of Items</h6>
                            <h4 class="text-black text-xl font-semibold leading-8">2 items</h4>
                        </div>
                        <div class="flex-col justify-start items-start gap-3 inline-flex">
                            <h6 class="text-gray-500 text-base font-normal leading-relaxed">Status</h6>
                            <h4 class="text-black text-xl font-semibold leading-8">Delivered</h4>
                        </div>
                    </div>
                </div>
                <div class="w-full flex-col justify-start items-start gap-10 flex">
                    <div class="w-full justify-between items-start flex sm:flex-row flex-col gap-3">
                        <h3 class="text-gray-900 text-2xl font-semibold font-manrope leading-9">Order Tracking</h3>
                        <h3 class="text-right text-gray-600 text-2xl font-semibold font-manrope leading-9">Order ID: #1025400025</h3>
                    </div>
                    <div class="w-full py-9 rounded-xl border border-gray-200 flex-col justify-start items-start flex">
                        <div class="w-full flex-col justify-center sm:items-center items-start gap-8 flex">
                            <ol class="flex sm:items-center items-start w-full sm:gap-0 gap-5">
                                <li class="flex w-full relative justify-center text-indigo-600 text-base font-semibold after:content-['']  after:w-full after:h-0.5 after:bg-indigo-600 after:inline-block after:absolute lg:after:top-4 after:top-3 xl:after:left-40 lg:after:left-36 md:after:left-28 sm:after:left-20 after:left-16">
                                <div class="block sm:whitespace-nowrap z-10 flex flex-col items-center text-center">
                                    <span class="w-6 h-6 bg-indigo-600 text-center border-2 border-transparent rounded-full flex justify-center items-center mx-auto mb-1 text-base font-bold text-white lg:w-8 lg:h-8">1</span> Order Placed
                                    <span class="text-indigo-600 text-base font-normal text-center">Feb 20th, 2024</span>
                                </div>
                                </li>
                                <li class="flex w-full relative justify-center text-indigo-600 text-base font-semibold after:content-['']  after:w-full after:h-0.5 after:bg-indigo-600 after:inline-block after:absolute lg:after:top-4 after:top-3 xl:after:left-40 lg:after:left-36 md:after:left-28 sm:after:left-20 after:left-16">
                                <div class="block sm:whitespace-nowrap z-10 flex flex-col items-center text-center">
                                    <span class="w-6 h-6 bg-indigo-600 rounded-full flex justify-center items-center mx-auto mb-1 text-white text-base font-bold lg:w-8 lg:h-8">2</span> Order Packed
                                    <span class="text-indigo-600 text-base font-normal text-center">Feb 20th, 2024</span>
                                </div>
                                </li>
                                <li class="flex w-full relative justify-center text-indigo-600 text-base font-semibold after:content-['']  after:w-full after:h-0.5 after:bg-gray-300 after:inline-block after:absolute lg:after:top-4 after:top-3 xl:after:left-40 lg:after:left-36 md:after:left-28 sm:after:left-20 after:left-16">
                                    <div class="block sm:whitespace-nowrap z-10 flex flex-col items-center text-center">
                                        <span class="w-6 h-6 bg-indigo-600 rounded-full flex justify-center items-center mx-auto mb-1 text-white text-base font-bold lg:w-8 lg:h-8">3</span> In Translt
                                        <span class="text-indigo-600 text-base font-normal text-center">Feb 20th, 2024</span>
                                    </div>
                                    </li>
                                <li class="flex w-full relative justify-center text-gray-500 text-base font-semibold">
                                    <div class="block sm:whitespace-nowrap z-10 flex flex-col items-center text-center">
                                        <span class="w-6 h-6 text-indigo-600 border-2 bg-transparent border-indigo-600 rounded-full flex justify-center items-center mx-auto mb-1 text-sm lg:w-8 lg:h-8">4</span> Out for Delivery
                                        <span class="text-gray-500 text-base font-normal text-center">Feb 20th, 2024 </span>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
                <div class="w-full flex-col justify-start items-start gap-10 flex">
                    <h3 class="text-gray-900 text-2xl font-semibold font-manrope leading-9">Items from the order</h3>
                    <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" 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" 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>
                <div class="w-full justify-start items-start gap-8 grid sm:grid-cols-2 grid-cols-1">
                    <div class="w-full p-6 rounded-xl border border-gray-200 flex-col justify-start items-start gap-4 inline-flex">
                        <div class="w-full justify-between items-start gap-2.5 inline-flex">
                            <h4 class="text-gray-600 text-xl font-medium leading-8">Discount</h4>
                            <h4 class="text-right text-black text-xl font-medium leading-8">$0.00</h4>
                        </div>
                        <div class="w-full justify-between items-start gap-2.5 inline-flex">
                            <h4 class="text-gray-600 text-xl font-medium leading-8">Delivery</h4>
                            <h4 class="text-right text-black text-xl font-medium leading-8">$20.00</h4>
                        </div>
                    </div>
                    <div class="w-full p-6 rounded-xl border border-gray-200 flex-col justify-start items-start gap-4 inline-flex">
                        <div class="w-full justify-between items-start gap-2.5 inline-flex">
                            <h4 class="text-gray-600 text-xl font-medium leading-8">Subtotal</h4>
                            <h4 class="text-right text-black text-xl font-medium leading-8">$200.00</h4>
                        </div>
                        <div class="w-full justify-between items-start gap-2.5 inline-flex">
                            <h4 class="text-gray-600 text-xl font-medium leading-8">Total</h4>
                            <h4 class="text-right text-black text-xl font-medium leading-8">$220.00</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Side by side order tracking

Following example shows order details next to order tracking steps where it shows order received, order pickup, estimate delivery time etc.

Preview
Code

Figma File

Order tracking with map indication

Use below example to show a list of tracking events along with purchased items list in a tabular format with map indication for precise order tracking

Preview
Code

Figma File

Order tracking with vertical timeline

Use this tailwind order tracking component to show a vertical timeline of the shipping order status and an overview of the purchased items along with list of orders and order summary.

Preview
Code

Figma File

Order tracking with progress indication

Use below example tailwind css order tracking example to show all purchased items list with there details and order tracking progress steps with different indications which indicates shipping order status.

Preview
Code

Figma File

Order tracking with location indication

This example shows order tracking with location indication using google map, where you can monitor the progess and location of purchased items.

Preview
Code

Figma File

Vertical order tracking timeline

Following example shows list of purchased items alongside progess step of order status and google map indication.

Preview
Code

Figma File

Order tracking with cards

This component can be used to show a tracking events and a set of cards where you can show the order information.

Preview
Code

Figma File