Tailwind CSS Order Tracking & Details Blocks

All Blocks
Ecommerce
Order Tracking & Details

Order Tracking & Details

Order tracking and detail views for delivery progress cards, purchase summaries, and post-purchase actions.

Active Order Card with Delivery Progress Pro

Tracking card combines order metadata, delivery timing, a multi-step status timeline, shipping details, purchased item rows, and an order-details action.

<div class="p-1.5 space-y-2 bg-surface border border-surface-line rounded-2xl">
                      
                      <div class="py-3 px-4 sm:px-6">
                        
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-5">
                          <div>
                            <p class="mb-1 text-xs text-muted-foreground-1">
                              Status
                            </p>
                            <p class="flex items-center font-medium text-[13px] text-foreground">
                              <span class="me-1.5 shrink-0 size-2 inline-block bg-green-500 rounded-full"></span>
                              Order in progress
                            </p>
                          </div>

<div>
                            <p class="mb-1 text-xs text-muted-foreground-1">
                              Order number
                            </p>
                            <p class="font-medium text-[13px] text-foreground">
                              72813820
                            </p>
                          </div>

<div>
                            <p class="mb-1 text-xs text-muted-foreground-1">
                              Order date
                            </p>
                            <p class="font-medium text-[13px] text-foreground">
                              04/08/2024
                            </p>
                          </div>

<div>
                            <p class="mb-1 text-xs text-muted-foreground-1">
                              Total
                            </p>
                            <p class="font-medium text-[13px] text-foreground">
                              $229
                            </p>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="p-4 sm:p-6 bg-layer rounded-xl shadow-2xs">
                        <div class="pb-6 mb-6 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                          
                          <div class="flex flex-wrap items-center gap-3">
                            
                            <div class="grow space-y-1">
                              
                              <div class="flex items-center gap-x-3">
                                <svg class="shrink-0 size-4 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>

<div class="flex items-center gap-x-3">
                                <svg class="shrink-0 size-4 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z"/><path d="M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2"/><path d="M18 22v-3"/><circle cx="10" cy="10" r="3"/></svg>

<div class="grow">
                                  <span class="text-sm text-muted-foreground-2">
                                    280 Suzanne Throughway, New York, Breannabury, OR 45801, US
                                  </span>
                                </div>
                              </div>
                              
                            </div>

<div>
                              <a class="py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 text-[13px] rounded-lg bg-secondary border border-secondary-line text-secondary-foreground hover:bg-secondary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-secondary-focus" href="../../../templates/ecommerce/storefront/order-details.html">
                                Order details
                              </a>
                            </div>
                            
                          </div>
                          
                        </div>

<div class="pb-6 mb-6 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                          
                          <div class="md:hidden mb-2">
                            <p class="mb-2 font-medium text-foreground">
                              Order status
                            </p>

<div class="flex flex-wrap justify-between items-center gap-2">
                              <p class="text-[13px] flex items-center gap-x-1.5">
                                <span class="relative flex">
                                  <span class="animate-ping absolute inline-flex size-full rounded-full bg-primary-400 opacity-75 dark:bg-primary-600"></span>
                                  <span class="relative inline-flex rounded-full size-2 bg-primary-500"></span>
                                  <span class="sr-only">Current</span>
                                </span>
                                <span class="font-medium text-primary">Preparing order</span>
                              </p>

<p class="text-[13px] flex items-center gap-x-1.5 text-foreground">
                                <span class="font-medium">Shipped</span>
                                <span>
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="m12 16 4-4-4-4"/></svg>
                                  <span class="sr-only">Next</span>
                                </span>
                              </p>
                            </div>
                          </div>

<div class="grid grid-cols-4 gap-x-1 sm:gap-x-3">
                            <div>
                              <p class="hidden md:flex items-center gap-x-1.5 mb-2 text-sm text-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                Order placed
                              </p>

<div class="flex w-full h-1.5 bg-surface-1 rounded-sm overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                <div class="flex flex-col justify-center rounded-sm overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
                              </div>
                              
                            </div>

<div>
                              <p class="hidden md:flex items-center gap-x-1.5 mb-2 text-sm text-primary">
                                <span class="relative flex">
                                  <span class="animate-ping absolute inline-flex size-full rounded-full bg-primary-400 opacity-75 dark:bg-primary-600"></span>
                                  <span class="relative inline-flex rounded-full size-2 bg-primary-500"></span>
                                  <span class="sr-only">Current</span>
                                </span>
                                Preparing order
                              </p>

<div class="flex w-full h-1.5 bg-surface-1 rounded-sm overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="100" aria-valuemax="100">
                                <div class="flex flex-col justify-center rounded-sm overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
                              </div>
                              
                            </div>

<div>
                              <p class="hidden md:block opacity-50 mb-2 text-sm text-foreground">
                                Shipped
                              </p>

<div class="flex w-full h-1.5 bg-surface-1 rounded-sm overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                <div class="flex flex-col justify-center rounded-sm overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 0%"></div>
                              </div>
                              
                            </div>

<div>
                              <p class="hidden md:block opacity-50 mb-2 text-sm text-foreground">
                                Delivered
                              </p>

<div  class=" relative flex flex-row gap-5 pb-6 mb-6 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                          <div class="relative shrink-0 w-24 sm:w-32">
                            <img class="shrink-0 w-full h-40 object-cover rounded-xl" src="https://images.unsplash.com/photo-1699593022913-7068606059c8?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                          </div>

<div class="grow">
                            
                            <div class="mb-3 sm:flex sm:gap-3">
                              <div class="grow">
                                <p class="text-foreground">
                                  Nike SB Zoom Blazer Mid Electric
                                </p>
        
                                <p class="mt-1 text-sm text-foreground">
                                  $150
                                </p>
                              </div>
                            </div>

<div class="flex flex-wrap sm:grid grid-cols-3 gap-3">
                              <div>
                                <p class="mb-1.5 text-sm text-muted-foreground-1">
                                  Color
                                </p>
                                <p class="text-sm text-foreground">
                                  White
                                </p>
                              </div>

<div>
                                <p class="mb-1.5 text-sm text-muted-foreground-1">
                                  Quantity
                                </p>
                                <p class="text-sm text-foreground">
                                  1
                                </p>
                              </div>
                            </div>

<div class="mt-5 flex flex-wrap items-center gap-2">
                              <button type="button" class="py-1.5 px-2.5 relative inline-flex justify-center items-center gap-x-1.5 text-xs sm:text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                Buy it again
                              </button>

<a class="py-1.5 px-2.5 relative inline-flex justify-center items-center gap-x-1.5 text-xs sm:text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/storefront/write-a-product-review.html">
                                Write a product review
                              </a>
                            </div>
                            
                          </div>
                        </div>

<div  class=" relative flex flex-row gap-5 pb-6 mb-6 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                          <div class="relative shrink-0 w-24 sm:w-32">
                            <img class="shrink-0 w-full h-40 object-cover rounded-xl" src="https://images.unsplash.com/photo-1506629082955-511b1aa562c8?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                          </div>

<div class="grow">
                            
                            <div class="mb-3 sm:flex sm:gap-3">
                              <div class="grow">
                                <p class="text-foreground">
                                  Windrunner
                                </p>
        
                                <span class="mt-1 block">
                                  <span class="text-sm text-muted-foreground-1">
                                    <s>$60</s>
                                  </span>
                                  <span class="text-sm text-destructive">
                                    $40
                                  </span>
                                </span>
                              </div>
                            </div>

<div class="flex flex-wrap sm:grid grid-cols-3 gap-3">
                              <div>
                                <p class="mb-1.5 text-sm text-muted-foreground-1">
                                  Color
                                </p>
                                <p class="text-sm text-foreground">
                                  Gray
                                </p>
                              </div>

<div  class=" relative flex flex-row gap-5 pb-6 mb-6 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                          <div class="relative shrink-0 w-24 sm:w-32">
                            <img class="shrink-0 w-full h-40 object-cover rounded-xl" src="https://images.unsplash.com/photo-1603344797033-f0f4f587ab60?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                          </div>

<div class="grow">
                            
                            <div class="mb-3 sm:flex sm:gap-3">
                              <div class="grow">
                                <p class="text-foreground">
                                  White Jeans
                                </p>
        
                                <p class="mt-1 text-sm text-foreground">
                                  $39
                                </p>
                              </div>
                            </div>

Order Details Summary Card with Actions Pro

Details card combines shipping and payment blocks, an order summary panel, purchased item rows, receipt actions, and cancel-order controls.

<div class="p-4 sm:p-6 bg-layer rounded-xl shadow-2xs">
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-y-7 gap-x-3">
                          <div>
                            <p class="mb-2 font-medium text-foreground">
                              Shipping address
                            </p>

<ul>
                              <li class="text-sm text-foreground">James Collins</li>
                              <li class="text-sm text-foreground">280 Suzanne Throughway</li>
                              <li class="text-sm text-foreground">New York, Breannabury, OR 45801, US</li>
                              <li class="mt-2 text-sm text-foreground">+44 000 000 0001</li>
                            </ul>

<div class="mt-3">
                              <button type="button" class="py-1.5 px-2.5 relative inline-flex justify-center items-center gap-x-1.5 text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-sheam">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                Change address
                              </button>
                            </div>
                          </div>

<div class="space-y-7">
                            <div>
                              <p class="mb-2 font-medium text-foreground">
                                Contact details
                              </p>

<p class="text-sm text-foreground">
                                jamescollins@site.so
                              </p>
                            </div>

<div>
                              <p class="mb-2 font-medium text-foreground">
                                Payment method
                              </p>

<div class="flex gap-x-3">
                                <div class="p-1 border border-line-2 rounded-md">
                                  <svg class="shrink-0 w-5 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asfasfa11fxniq" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"></path></mask><g mask="url(#asfasfa11fxniq)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"></path><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"></path><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"></path></g></svg>
                                </div>

<div class="grow">
                                  <p class="text-sm text-foreground">
                                    MasterCard •••• 4242
                                  </p>
                                </div>
                              </div>
                              
                            </div>
                          </div>

<div class="space-y-3">
                            
                            <div class="flex flex-col">
                              <div class="space-y-5">
                                
                                <div class="space-y-2">
                                  
                                  <div class="grid grid-cols-2 gap-2">
                                    <div>
                                      <span class="text-[13px] text-foreground">Subtotal</span>
                                    </div>

<div>
                                    <div class="grid grid-cols-2 gap-2">
                                      <div>
                                        <span class="text-[13px] text-foreground">Shipping</span>
                                      </div>

<div class="grid grid-cols-2 gap-2">
                                    <div>
                                      <span class="text-[13px] text-foreground">Estimated Tax</span>
                                    </div>

<div class="grid grid-cols-2 gap-2">
                                    <div>
                                      <span class="text-[13px] text-muted-foreground-1">Sale</span>
                                    </div>

<div class="grid grid-cols-2 gap-2">
                                    <div>
                                      <span class="font-medium text-sm text-foreground">Total</span>
                                    </div>

<div class="text-end">
                              <button type="button" class="py-1.5 px-2.5 relative inline-flex justify-center items-center gap-x-1.5 text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>
                                View or Print receipt
                              </button>
                            </div>
                          </div>
                          
                        </div>

<div class="pt-6 mt-6 border-t border-line-2">
                          <div class="flex flex-wrap items-center gap-3">
                            <div class="grow">
                              <p class="text-sm text-muted-foreground-1">
                                Something wrong? <a class="inline-flex items-center gap-x-1 font-medium text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/exchange-or-return.html">
                                  Exchange or return
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                </a>
                              </p>
                            </div>
          
                            <button type="button" class="py-1.5 px-2.5 relative inline-flex justify-center items-center gap-x-1.5 text-[13px] rounded-lg bg-layer border border-layer-line text-destructive shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-shcom">
                              Cancel order
                            </button>
                          </div>
                        </div>
                        
                      </div>

<div class="grow">
                                  <span class="text-sm text-muted-foreground-2">
                                    Estimated delivery: <span class="font-semibold text-foreground">Wednesday, Aug 7 2024</span>
                                  </span>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>

<div>
                              <p class="hidden md:block opacity-50 mb-2 text-sm text-foreground">
                                Shipped
                              </p>

<div>
                              <p class="hidden md:block opacity-50 mb-2 text-sm text-foreground">
                                Delivered
                              </p>

<div  class=" relative flex flex-row gap-5 pb-6 mb-6 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                          <div class="relative shrink-0 w-24 sm:w-32">
                            <img class="shrink-0 w-full h-40 object-cover rounded-xl" src="https://images.unsplash.com/photo-1506629082955-511b1aa562c8?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                          </div>

<div class="flex flex-wrap sm:grid grid-cols-3 gap-3">
                              <div>
                                <p class="mb-1.5 text-sm text-muted-foreground-1">
                                  Color
                                </p>
                                <p class="text-sm text-foreground">
                                  Gray
                                </p>
                              </div>

<div  class=" relative flex flex-row gap-5 pb-6 mb-6 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                          <div class="relative shrink-0 w-24 sm:w-32">
                            <img class="shrink-0 w-full h-40 object-cover rounded-xl" src="https://images.unsplash.com/photo-1603344797033-f0f4f587ab60?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                          </div>