Tailwind CSS Order History Section

Order History with Simple Details

Use this default order history example to show history of user's previous orders.

Preview
Code

                                                <section class="py-24 relative">
    <div class="w-full max-w-7xl mx-auto px-4 md:px-8">
        <div class="grid grid-cols-12">
            <div class="col-span-12 md:col-span-8 md:pr-8 md:border-r border-gray-200">
                <div class="flex max-sm:flex-col items-center justify-between mb-3">
                    <h3 class="font-manrope font-bold text-2xl leading-9 text-black">Purchase Item 1</h3>
                    <p class="font-medium text-lg leading-8 text-gray-500">Order # 91256800100</p>
                </div>
                <div class="flex max-sm:flex-col items-center justify-between mb-12">
                    <h2 class="font-manrope font-bold text-3xl leading-10 text-black">$150.00</h2>
                    <p class="font-semibold text-xl leading-8 text-indigo-600 cursor-pointer">Details</p>
                </div>
                <div class="img-box w-full max-sm:mx-auto mb-12">
                    <img src="https://pagedone.io/asset/uploads/1705403665.png" alt="" class="rounded-xl">
                </div>
                <div class="flex items-center max-sm:flex-col md:justify-end gap-4">
                    <button class="rounded-full px-8 py-3 bg-indigo-600 shadow-sm shadow-transparent text-white font-semibold text-base transition-all duration-500 hover:bg-indigo-700 hover:shadow-indigo-300">Buy
                        Again</button>
                    <button class="rounded-full px-8 py-3 bg-white shadow-sm shadow-transparent text-gray-900 border border-gray-300 font-semibold text-base transition-all duration-500 hover:bg-gray-50 hover:shadow-gray-100 hover:border-gray-400">View
                        product</button>
                </div>
            </div>
            <div class="col-span-12 md:col-span-4 md:pl-8 max-md:mt-7 flex flex-col items-center">
                <div class="w-full">
                    <div class="flex items-center justify-between mb-5 max-md:max-w-sm max-sm:mx-auto">
                        <h3 class="font-manrope font-bold text-2xl leading-9 text-black">Write a review</h3>
                        <svg class="cursor-pointer" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14.0261 14.2259L25.5755 25.7753M14.0261 25.7753L25.5755 14.2259" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                    <div class="flex flex-col items-center w-full max-w-sm max-sm:mx-auto">
                        <textarea name="review" id="review" cols="30" rows="10" class="py-3 px-4 mb-16 rounded-2xl border border-gray-300 w-full h-[283px] resize-none font-normal text-base leading-7 placeholder:text-gray-400 text-gray-900 outline-0 max-sm:mx-auto" placeholder="Enter a description..."></textarea>
                        <button class="rounded-full py-3 px-5 text-center bg-indigo-600 text-white font-semibold text-base w-full max-w-sm  shadow-sm shadow-transparent transition-all duration-500 hover:bg-indigo-700 hover:shadow-indigo-300">Post
                            review</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

HTML Copy

Order History List with Invoice

Order History List with Invoice is a feature-rich and visually appealing tool designed to provide users with a detailed overview of their past transactions.

Preview
Code

Figma File

                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl mx-auto px-4 md:px-8">
            <h2 class="font-manrope font-extrabold text-3xl lead-10 text-black mb-9">Order History</h2>

            <div class="flex sm:flex-col lg:flex-row sm:items-center justify-between">
                <ul class="flex max-sm:flex-col sm:items-center gap-x-14 gap-y-3">
                    <li
                        class="font-medium text-lg leading-8 cursor-pointer text-indigo-600 transition-all duration-500 hover:text-indigo-600">
                        All Order</li>
                    <li
                        class="font-medium text-lg leading-8 cursor-pointer text-black transition-all duration-500 hover:text-indigo-600">
                        Summary</li>
                    <li
                        class="font-medium text-lg leading-8 cursor-pointer text-black transition-all duration-500 hover:text-indigo-600">
                        Completed</li>
                    <li
                        class="font-medium text-lg leading-8 cursor-pointer text-black transition-all duration-500 hover:text-indigo-600">
                        Cancelled</li>
                </ul>
                <div class="flex max-sm:flex-col items-center justify-end gap-2 max-lg:mt-5">
                    <div class="flex rounded-full py-3 px-4 border border-gray-300 relative">
                        <svg class="relative " width="18" height="20" viewBox="0 0 18 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M1.5 7.75H16.5M11.9213 11.875H11.928M11.9212 14.125H11.9279M9.14676 11.875H9.1535M9.14676 14.125H9.1535M6.37088 11.875H6.37762M6.37088 14.125H6.37762M5.25 4.75V1.75M12.75 4.75V1.75M7.5 18.25H10.5C13.3284 18.25 14.7426 18.25 15.6213 17.3713C16.5 16.4926 16.5 15.0784 16.5 12.25V9.25C16.5 6.42157 16.5 5.00736 15.6213 4.12868C14.7426 3.25 13.3284 3.25 10.5 3.25H7.5C4.67157 3.25 3.25736 3.25 2.37868 4.12868C1.5 5.00736 1.5 6.42157 1.5 9.25V12.25C1.5 15.0784 1.5 16.4926 2.37868 17.3713C3.25736 18.25 4.67157 18.25 7.5 18.25Z"
                                stroke="#111827" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <input type="text" name="from-dt" id="from-dt"
                            class="font-semibold px-2 text-sm text-gray-900 outline-0 appearance-none flex flex-row-reverse cursor-pointer w-28 placeholder-gray-900" placeholder="11-01-2023">
                    </div>
                    <p class="font-medium text-lg leading-8 text-black">To</p>
                    <div class="flex rounded-full py-3 px-4 border border-gray-300 relative">
                        <svg class="relative " width="18" height="20" viewBox="0 0 18 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M1.5 7.75H16.5M11.9213 11.875H11.928M11.9212 14.125H11.9279M9.14676 11.875H9.1535M9.14676 14.125H9.1535M6.37088 11.875H6.37762M6.37088 14.125H6.37762M5.25 4.75V1.75M12.75 4.75V1.75M7.5 18.25H10.5C13.3284 18.25 14.7426 18.25 15.6213 17.3713C16.5 16.4926 16.5 15.0784 16.5 12.25V9.25C16.5 6.42157 16.5 5.00736 15.6213 4.12868C14.7426 3.25 13.3284 3.25 10.5 3.25H7.5C4.67157 3.25 3.25736 3.25 2.37868 4.12868C1.5 5.00736 1.5 6.42157 1.5 9.25V12.25C1.5 15.0784 1.5 16.4926 2.37868 17.3713C3.25736 18.25 4.67157 18.25 7.5 18.25Z"
                                stroke="#111827" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <input type="text" name="to-dt" id="to-dt"
                            class="font-semibold px-2 text-sm text-gray-900 outline-0 appearance-none flex flex-row-reverse cursor-pointer w-28 placeholder-gray-900" placeholder="11-01-2023">
                    </div>
                </div>
            </div>
            <div class="mt-7 border border-gray-300 pt-9">
                <div class="flex max-md:flex-col items-center justify-between px-3 md:px-11">
                    <div class="data">
                        <p class="font-medium text-lg leading-8 text-black whitespace-nowrap">Order : #10234987</p>
                        <p class="font-medium text-lg leading-8 text-black mt-3 whitespace-nowrap">Order Payment : 18th
                            march 2021</p>
                    </div>
                    <div class="flex items-center gap-3 max-md:mt-5">
                        <button
                            class="rounded-full px-7 py-3 bg-white text-gray-900 border border-gray-300 font-semibold text-sm shadow-sm shadow-transparent transition-all duration-500 hover:shadow-gray-200 hover:bg-gray-50 hover:border-gray-400">Show
                            Invoice</button>
                        <button
                            class="rounded-full px-7 py-3 bg-indigo-600 shadow-sm shadow-transparent text-white font-semibold text-sm transition-all duration-500 hover:shadow-indigo-400 hover:bg-indigo-700">Buy
                            Now</button>

                    </div>
                </div>
                <svg class="my-9 w-full" xmlns="http://www.w3.org/2000/svg" width="1216" height="2" viewBox="0 0 1216 2"
                    fill="none">
                    <path d="M0 1H1216" stroke="#D1D5DB" />
                </svg>

                <div class="flex max-lg:flex-col items-center gap-8 lg:gap-24 px-3 md:px-11">
                    <div class="grid grid-cols-4 w-full">
                        <div class="col-span-4 sm:col-span-1">
                            <img src="https://pagedone.io/asset/uploads/1705474774.png" alt="" class="max-sm:mx-auto">
                        </div>
                        <div
                            class="col-span-4 sm:col-span-3 max-sm:mt-4 sm:pl-8 flex flex-col justify-center max-sm:items-center">
                            <h6 class="font-manrope font-semibold text-2xl leading-9 text-black mb-3 whitespace-nowrap">
                                Decoration Flower
                                port</h6>
                            <p class="font-normal text-lg leading-8 text-gray-500 mb-8 whitespace-nowrap">By: Dust
                                Studios</p>
                            <div class="flex items-center max-sm:flex-col gap-x-10 gap-y-3">
                                <span class="font-normal text-lg leading-8 text-gray-500 whitespace-nowrap">Size:
                                    s</span>
                                <span class="font-normal text-lg leading-8 text-gray-500 whitespace-nowrap">Qty:
                                    1</span>
                                <p class="font-semibold text-xl leading-8 text-black whitespace-nowrap">Price $80.00</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-around w-full  sm:pl-28 lg:pl-0">
                        <div class="flex flex-col justify-center items-start max-sm:items-center">
                            <p class="font-normal text-lg text-gray-500 leading-8 mb-2 text-left whitespace-nowrap">
                                Status</p>
                            <p class="font-semibold text-lg leading-8 text-green-500 text-left whitespace-nowrap">
                                Delivered</p>
                        </div>
                        <div class="flex flex-col justify-center items-start max-sm:items-center">
                            <p class="font-normal text-lg text-gray-500 leading-8 mb-2 text-left whitespace-nowrap">
                                Delivery Expected by</p>
                            <p class="font-semibold text-lg leading-8 text-black text-left whitespace-nowrap">23rd March
                                2021</p>
                        </div>
                    </div>

                </div>

                <svg class="my-9 w-full" xmlns="http://www.w3.org/2000/svg" width="1216" height="2" viewBox="0 0 1216 2"
                    fill="none">
                    <path d="M0 1H1216" stroke="#D1D5DB" />
                </svg>

                <div class="flex max-lg:flex-col items-center gap-8 lg:gap-24 px-3 md:px-11">
                    <div class="grid grid-cols-4 w-full">
                        <div class="col-span-4 sm:col-span-1">
                            <img src="https://pagedone.io/asset/uploads/1705474672.png" alt="" class="max-sm:mx-auto">
                        </div>
                        <div
                            class="col-span-4 sm:col-span-3 max-sm:mt-4 sm:pl-8 flex flex-col justify-center max-sm:items-center">
                            <h6 class="font-manrope font-semibold text-2xl leading-9 text-black mb-3 whitespace-nowrap">
                                Decoration’s Item</h6>
                            <p class="font-normal text-lg leading-8 text-gray-500 mb-8 whitespace-nowrap">By: Dust
                                Studios</p>
                            <div class="flex items-center max-sm:flex-col gap-x-10 gap-y-3">
                                <span class="font-normal text-lg leading-8 text-gray-500 whitespace-nowrap">Size:
                                    s</span>
                                <span class="font-normal text-lg leading-8 text-gray-500 whitespace-nowrap">Qty:
                                    1</span>
                                <p class="font-semibold text-xl leading-8 text-black whitespace-nowrap">Price $80.00</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-around w-full sm:pl-28 lg:pl-0">
                        <div class="flex flex-col justify-center items-start max-sm:items-center">
                            <p class="font-normal text-lg text-gray-500 leading-8 mb-2 text-left whitespace-nowrap">
                                Status</p>
                            <p class="font-semibold text-lg leading-8 text-red-500 text-left whitespace-nowrap">
                                Cancelled</p>
                        </div>
                        <div class="flex flex-col justify-center items-start max-sm:items-center">
                            <p class="font-normal text-lg text-gray-500 leading-8 mb-2 text-left whitespace-nowrap">
                                Delivery Expected by</p>
                            <p class="font-semibold text-lg leading-8 text-black text-left whitespace-nowrap">23rd March
                                2021</p>
                        </div>
                    </div>

                </div>
                <svg class="mt-9 w-full" xmlns="http://www.w3.org/2000/svg" width="1216" height="2" viewBox="0 0 1216 2"
                    fill="none">
                    <path d="M0 1H1216" stroke="#D1D5DB" />
                </svg>

                <div class="px-3 md:px-11 flex items-center justify-between max-sm:flex-col-reverse">
                    <div class="flex max-sm:flex-col-reverse items-center">
                        <button
                            class="flex items-center gap-3 py-10 pr-8 sm:border-r border-gray-300 font-normal text-xl leading-8 text-gray-500 group transition-all duration-500 hover:text-indigo-600">
                            <svg width="40" height="41" viewBox="0 0 40 41" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path class="stroke-gray-600 transition-all duration-500 group-hover:stroke-indigo-600"
                                    d="M14.0261 14.7259L25.5755 26.2753M14.0261 26.2753L25.5755 14.7259" stroke=""
                                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            cancel order
                        </button>
                        <p class="font-normal text-xl leading-8 text-gray-500 sm:pl-8">Payment Is Succesfull</p>
                    </div>
                    <p class="font-medium text-xl leading-8 text-black max-sm:py-4"> <span class="text-gray-500">Total
                            Price: </span> &nbsp;$200.00</p>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Order History Table

The Order History Tailwind CSS is a clean and organized representation of a user's past orders.

Preview
Code

Figma File

                                                <section class="py-24 bg-white">
        <div class="w-full max-w-7xl mx-auto px-4 md:px-8">
            <div class="main-data p-8 sm:p-14 bg-gray-50 rounded-3xl">
                <h2 class="text-center font-manrope font-semibold text-4xl text-black mb-16">Order History</h2>
                <div class="grid grid-cols-8 pb-9">
                    <div class="col-span-8 lg:col-span-4">
                        <p class="font-medium text-lg leading-8 text-indigo-600">Product </p>
                    </div>
                    <div class="col-span-1 max-lg:hidden">
                        <p class="font-medium text-lg leading-8 text-gray-600 text-center">price </p>
                    </div>
                    <div class="col-span-1 max-lg:hidden flex items-center justify-center">
                        <p class="font-medium text-lg leading-8 text-gray-600">Qty </p>
                    </div>
                    <div class="col-span-2 max-lg:hidden">
                        <p class="font-medium text-lg leading-8 text-gray-500">Delivery Expected by </p>
                    </div>
                </div>
                <div
                    class="box p-8 rounded-3xl bg-gray-100 grid grid-cols-8 mb-7 cursor-pointer transition-all duration-500 hover:bg-indigo-50 max-lg:max-w-xl max-lg:mx-auto">

                    <div class="col-span-8 sm:col-span-4 lg:col-span-1 sm:row-span-4 lg:row-span-1">
                        <img src="https://pagedone.io/asset/uploads/1705474950.png" alt="earbuds image" class="max-lg:w-auto max-sm:mx-auto rounded-xl">
                    </div>
                    <div
                        class="col-span-8 sm:col-span-4 lg:col-span-3 flex h-full justify-center pl-4 flex-col max-lg:items-center">
                        <h5 class="font-manrope font-semibold text-2xl leading-9 text-black mb-1 whitespace-nowrap">
                            Apple Airpods Pro</h5>
                        <p class="font-normal text-base leading-7 text-gray-600 max-md:text-center">White</p>
                    </div>

                    <div class="col-span-8 sm:col-span-4 lg:col-span-1 flex items-center justify-center">
                        <p class="font-semibold text-xl leading-8 text-black">$249.99</p>
                    </div>
                    <div class="col-span-8 sm:col-span-4 lg:col-span-1 flex items-center justify-center ">
                        <p class="font-semibold text-xl leading-8 text-indigo-600 text-center">2</p>
                    </div>
                    <div class="col-span-8 sm:col-span-4 lg:col-span-2 flex items-center justify-center ">
                        <p class="font-semibold text-xl leading-8 text-black">23rd March 2021</p>
                    </div>
                </div>

                <div
                    class="box p-8 rounded-3xl bg-gray-100 grid grid-cols-8 mb-7 cursor-pointer transition-all duration-500 hover:bg-indigo-50 max-lg:max-w-xl max-lg:mx-auto">

                    <div class="col-span-8 sm:col-span-4 lg:col-span-1 sm:row-span-4 lg:row-span-1">
                        <img src="https://pagedone.io/asset/uploads/1705474950.png" alt="earbuds image" class="max-lg:w-auto max-sm:mx-auto rounded-xl">
                    </div>
                    <div
                        class="col-span-8 sm:col-span-4 lg:col-span-3 flex h-full justify-center pl-4 flex-col max-lg:items-center">
                        <h5 class="font-manrope font-semibold text-2xl leading-9 text-black mb-1 whitespace-nowrap">
                            Apple Airpods Pro</h5>
                        <p class="font-normal text-base leading-7 text-gray-600 max-md:text-center">White</p>
                    </div>

                    <div class="col-span-8 sm:col-span-4 lg:col-span-1 flex items-center justify-center">
                        <p class="font-semibold text-xl leading-8 text-black">$249.99</p>
                    </div>
                    <div class="col-span-8 sm:col-span-4 lg:col-span-1 flex items-center justify-center ">
                        <p class="font-semibold text-xl leading-8 text-indigo-600 text-center">2</p>
                    </div>
                    <div class="col-span-8 sm:col-span-4 lg:col-span-2 flex items-center justify-center ">
                        <p class="font-semibold text-xl leading-8 text-black">23rd March 2021</p>
                    </div>
                </div>

                <div
                    class="box p-8 rounded-3xl bg-gray-100 grid grid-cols-8 mb-7 cursor-pointer transition-all duration-500 hover:bg-indigo-50 max-lg:max-w-xl max-lg:mx-auto">

                    <div class="col-span-8 sm:col-span-4 lg:col-span-1 sm:row-span-4 lg:row-span-1">
                        <img src="https://pagedone.io/asset/uploads/1705474950.png" alt="earbuds image" class="max-lg:w-auto max-sm:mx-auto rounded-xl">
                    </div>
                    <div
                        class="col-span-8 sm:col-span-4 lg:col-span-3 flex h-full justify-center pl-4 flex-col max-lg:items-center">
                        <h5 class="font-manrope font-semibold text-2xl leading-9 text-black mb-1 whitespace-nowrap">
                            Apple Airpods Pro</h5>
                        <p class="font-normal text-base leading-7 text-gray-600 max-md:text-center">White</p>
                    </div>

                    <div class="col-span-8 sm:col-span-4 lg:col-span-1 flex items-center justify-center">
                        <p class="font-semibold text-xl leading-8 text-black">$249.99</p>
                    </div>
                    <div class="col-span-8 sm:col-span-4 lg:col-span-1 flex items-center justify-center ">
                        <p class="font-semibold text-xl leading-8 text-indigo-600 text-center">2</p>
                    </div>
                    <div class="col-span-8 sm:col-span-4 lg:col-span-2 flex items-center justify-center ">
                        <p class="font-semibold text-xl leading-8 text-black">23rd March 2021</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Order History Invoice Table

This example of tailwind css order history shows invoice table of previous order's of customer.

Preview
Code

Figma File

Order History with Card Layout

Use this Order history tailwind component to add card layout.

Preview
Code

Figma File

Order History with CTA Button

This example of order history shows a list of previous orders with a CTA button to view the order details.

Preview
Code

Figma File

Order History with date range and sort

This example of order history shows a list of previous orders with a date range and sort option.

Preview
Code

Figma File

Order History with Detail

This example of order history shows a list of previous orders with a CTA button to view the order details.

Preview
Code

Figma File

Order History with Date Range and Status

This example of order history shows a list of previous orders with a date range and status option and CTA Button.

Preview
Code

Figma File

Order History in Card Layout

This example of order history shows a list of previous orders in card layout with a order number, order date, delivery date and address detail to view the order details.

Preview
Code

Figma File

order history invoice with card layout

This example of order history shows a list of previous orders in card layout with a order number, order date, delivery date and address detail to view the order detail. You can show CTA button to download invoice.

Preview
Code

Figma File

order history with pagination

This example of order history shows a list of previous orders with pagination and CTA button to view the order details.

Preview
Code

Figma File

Order History with attribute

This example of order history shows a list of previous orders with attribute such as color, size, price and CTA button to view the order details. You can show actions to perform on product like delete or move to wishlist.

Preview
Code

Figma File

Order History with status and CTA Button

This example of order history shows a list of past orders with status and CTA button to view the order details.

Preview
Code

Figma File

Order History with Sorting

This example of order history shows a list of past orders with sorting option to view past week orders, past month orders etc and you can view invoice and view orders.

Preview
Code

Figma File

Order History with Banner

This example of order history shows a list of past orders with banner and CTA buttons with icons to view the order details.

Preview
Code

Figma File

order history table with date picker

Use this example of order history to show history of user's previous orders according to selected date.

Preview
Code

Figma File