Tailwind CSS Order Summary Cards Blocks

All Blocks
Ecommerce
Order Summary Cards

Order Summary Cards

Order summary cards for admin order recaps, promo inputs, line items, and total breakdowns.

Detailed Order Summary Card with Status Badges Pro

Wide order summary card combines payment and fulfillment badges, item detail rows, promo redemption, total breakdowns, and previous or next navigation.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-2 px-5 flex justify-between items-center gap-x-3 border-b border-card-header">
    <h2 class="inline-block font-semibold text-foreground">
      Order #32543
    </h2>

<div class="flex justify-end items-center gap-x-2">
      
      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium 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-epfo">
        Export
        <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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
      </button>

<div class="hs-dropdown [--auto-close:inside] [--placement:top-right] relative inline-flex">
        
        <button id="hs-pro-dupfind" type="button" class="size-8.5 inline-flex justify-center items-center gap-x-1.5 text-xs font-medium 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" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
          <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupfind">
          <div class="p-1">
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Duplicate
            </button>
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Cancel
            </button>
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Archive
            </button>
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Edit
            </button>
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Print
            </button>

<button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Delete
            </button>
          </div>
        </div>
        
      </div>
      
    </div>
    
  </div>

<div class="p-5 flex flex-col">
    
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-4">
      <p class="text-sm text-foreground">
        Order placed: 17 Aug, 2023, 5:48 am
      </p>
      <div class="inline-flex items-center gap-x-2">
        <span class="py-1 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-green-100 text-green-800 rounded-full dark:bg-green-500/10 dark:text-green-500">
          Paid
        </span>
        <span class="py-1 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full dark:bg-yellow-500/10 dark:text-yellow-500">
          Unfulfilled
        </span>
      </div>
    </div>

<div class="pt-5 mt-5 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">

<div class="grid grid-cols-1 sm:grid-cols-4 md:grid-cols-11 items-center gap-5">
        <div class="col-span-1 md:col-span-2">
          <img class="shrink-0 size-28 sm:w-auto sm:h-auto xl:size-28 rounded-md" src="https://images.unsplash.com/photo-1613852348851-df1739db8201?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
        </div>

<div class="col-span-1 md:col-span-3">
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-5">
            <div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Item
              </p>
              <p class="text-sm text-foreground">
                White T-shirts
              </p>
            </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Color
              </p>
              <p class="text-sm text-foreground">
                White
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Price
              </p>
              <p class="text-sm text-foreground">
                $21
              </p>
            </div>
          </div>
        </div>

<div class="col-span-1 md:col-span-3">
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-5">
            <div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Quantity
              </p>
              <p class="text-sm text-foreground">
                1
              </p>
            </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Expected delivery date
              </p>
              <p class="text-sm text-foreground">
                Oct 3, 2:00 pm
              </p>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>

<div class="pt-5 mt-5 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">

<div class="grid grid-cols-1 sm:grid-cols-4 md:grid-cols-11 items-center gap-5">
        <div class="col-span-1 md:col-span-2">
          <img class="shrink-0 size-28 sm:w-auto sm:h-auto xl:size-28 rounded-md" src="https://images.unsplash.com/photo-1611911813383-67769b37a149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
        </div>

<div class="col-span-1 md:col-span-3">
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-5">
            <div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Item
              </p>
              <p class="text-sm text-foreground">
                Pattern Winter Sweater
              </p>
            </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Color
              </p>
              <p class="text-sm text-foreground">
                -
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Price
              </p>
              <p class="text-sm text-foreground">
                $37
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Expected delivery date
              </p>
              <p class="text-sm text-foreground">
                Oct 3, 4:20 pm
              </p>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>

<div class="pt-5 mt-5 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      
      <div class="mb-5 bg-yellow-50 border border-yellow-200 text-sm rounded-lg p-2 dark:bg-yellow-800/10 dark:border-yellow-900" role="alert" tabindex="-1" aria-labelledby="hs-pro-eodlisp-label">
        <div class="flex">
          <svg class="shrink-0 mt-1 size-4 text-yellow-800 dark:text-yellow-600" 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"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
          <div class="ms-2.5 grow">
            <h3 id="hs-pro-eodlisp-label" class="font-semibold text-yellow-800 dark:text-yellow-600">
              Split shipment
            </h3>
            <p class="text-sm text-yellow-700 dark:text-yellow-700">
              This item will be delivered in a different shipment.
            </p>
          </div>
        </div>
      </div>

<div class="grid grid-cols-1 sm:grid-cols-4 md:grid-cols-11 items-center gap-5">
        <div class="col-span-1 md:col-span-2">
          <img class="shrink-0 size-28 sm:w-auto sm:h-auto xl:size-28 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
        </div>

<div class="col-span-1 md:col-span-3">
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-5">
            <div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Item
              </p>
              <p class="text-sm text-foreground">
                Mango Women's shoe
              </p>
            </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Color
              </p>
              <p class="text-sm text-foreground">
                Brown
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Price
              </p>
              <p class="text-sm text-foreground">
                $65
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Expected delivery date
              </p>
              <p class="text-sm text-foreground">
                Oct 5, 5:50 pm
              </p>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>

<div class="pt-5 mt-5 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <div class="grid sm:grid-cols-11 gap-5">
        <div class="col-span-full sm:col-span-6 sm:col-start-6">
          
          <div>
            <span class="block mb-2 text-sm font-medium text-foreground">
              Promo code
            </span>
            <div class="flex justify-between items-center gap-x-3 p-1 ps-3 bg-surface rounded-lg">
              <span class="font-medium text-xs uppercase text-foreground">
                Thankyou
              </span>
              <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-md bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus">
                Redeem
              </button>
            </div>
          </div>

<dl class="mt-4 grid grid-cols-12 gap-2 pe-1">
            <dt class="col-span-8 text-sm text-foreground">Subtotal:</dt>
            <dd class="col-span-4 text-end font-semibold text-sm text-foreground">$123.00</dd>
            <dt class="col-span-8 text-sm text-foreground">Delivery (Standard delivery):</dt>
            <dd class="col-span-4 text-end font-semibold text-sm text-foreground">0.00</dd>
            <dt class="col-span-8 text-sm text-foreground">Est tax:</dt>
            <dd class="col-span-4 text-end font-semibold text-sm text-foreground">$20.00</dd>
            <dt class="col-span-8 text-sm text-foreground">Order total:</dt>
            <dd class="col-span-4 text-end font-semibold text-sm text-foreground">$143.00</dd>
          </dl>
          
        </div>
      </div>
    </div>
    
  </div>

<div class="py-2 px-5 border-t border-card-footer">
    <div class="flex justify-between items-center gap-x-2">
      
      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs rounded-lg border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
        <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="m15 18-6-6 6-6"/></svg>
        Prev
      </button>
      
      
      <span class="text-xs text-muted-foreground-1">
        Order 36 of 129
      </span>

<button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs rounded-lg border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
        Next
        <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="m9 18 6-6-6-6"/></svg>
      </button>
      
    </div>
  </div>
  
</div>

Compact order summary card stacks item thumbnails, a promo code field, subtotal and tax rows, and edit-cart or continue actions.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-3 px-5 border-b border-card-header">
    <h2 class="inline-block font-semibold text-foreground">
      Items (2)
    </h2>
  </div>

<div class="pt-4 pb-5 px-5 flex flex-col justify-between h-full">
    
    <div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <div class="flex items-center gap-x-5">
        <div class="relative shrink-0">
          <img class="shrink-0 size-20 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
          <div class="absolute -top-2.5 -inset-e-2.5 z-10">
            <span class="py-0.5 px-1.5 min-w-6 min-h-6 flex flex-col justify-center items-center rounded-full text-xs font-medium bg-primary border-2 border-card-line text-primary-foreground">1</span>
          </div>
        </div>
        <div class="grow">
          <ul>
            <li>
              <span class="text-sm text-foreground">$65</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Mango Women's shoe</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Color:</span>
              <span class="text-sm text-foreground">Brown</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Size:</span>
              <span class="text-sm text-foreground">UK 7</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <div class="flex items-center gap-x-5">
        <div class="relative shrink-0">
          <img class="shrink-0 size-20 rounded-md" src="https://images.unsplash.com/photo-1613852348851-df1739db8201?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
          <div class="absolute -top-2.5 -inset-e-2.5 z-10">
            <span class="py-0.5 px-1.5 min-w-6 min-h-6 flex flex-col justify-center items-center rounded-full text-xs font-medium bg-primary border-2 border-card-line text-primary-foreground">1</span>
          </div>
        </div>
        <div class="grow">
          <ul>
            <li>
              <span class="text-sm text-foreground">$21</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Calvin Klein T-shirts</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Color:</span>
              <span class="text-sm text-foreground">White</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Size:</span>
              <span class="text-sm text-foreground">M</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <label for="hs-pro-echddpc" class="block mb-2 text-sm font-medium text-foreground">
        Promo code
      </label>
      <input id="hs-pro-echddpc" type="email" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="e.g. 50OFF">
      <p class="mt-2 text-xs text-muted-foreground-1">
        Terms and conditions applied.
      </p>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <dl class="grid grid-cols-2 gap-2">
        <dt class="text-sm text-foreground">Subtotal:</dt>
        <dd class="text-end font-semibold text-sm text-foreground">$86.00</dd>
        <dt class="text-sm text-foreground">Delivery:</dt>
        <dd class="text-end font-semibold text-sm text-foreground">Free</dd>
      </dl>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <dl class="grid grid-cols-2 gap-2">
        <dt class="text-sm text-foreground">Est tax:</dt>
        <dd class="text-end font-semibold text-sm text-foreground">$20.00</dd>
      </dl>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <dl class="grid grid-cols-2 gap-2">
        <dt class="text-sm text-foreground">Order total:</dt>
        <dd class="text-end font-semibold text-sm text-foreground">$106.00</dd>
      </dl>
    </div>
    
  </div>

<div class="py-4 px-5 border-t border-card-footer">
    <div class="flex gap-x-3">
      <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium 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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
        Edit cart
      </button>

<button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus">
        Continue
      </button>
    </div>
  </div>
  
</div>

Order Summary Cards

Detailed Order Summary Card with Status Badges Pro

Compact Order Summary Card with Promo Code Pro