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.

Create a responsive UI block named "Active Order Card with Delivery Progress" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ecommerce/order-tracking-and-details/#active-order-card-with-delivery-progress. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: ecommerce/order-tracking-and-details
- Block ID: active-order-card-with-delivery-progress
- Source description: Tracking card combines order metadata, delivery timing, a multi-step status timeline, shipping details, purchased item rows, and an order-details action.
- Preview iframe: https://preline.co/blocks/ecommerce/order-tracking-and-details/iframes/pro/active-order-card-with-delivery-progress.html (repo path: blocks/ecommerce/order-tracking-and-details/iframes/pro/active-order-card-with-delivery-progress.html)
- Source markup reference:
  - partials/pro/storefront/cards/order-cards.html
  - partials/pro/storefront/layouts-components/order-summary.html
  - partials/pro/storefront/sources/simple-icon-list.html
  - partials/pro/storefront/forms/pb-order-status.html
  - partials/pro/storefront/sources/order-details-listing-item.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Outer shell is `<div class="p-1.5 space-y-2 bg-surface border border-surface-line rounded-2xl">` holding a bare `py-3 px-4 sm:px-6` header plus exactly one nested `p-4 sm:p-6 bg-layer rounded-xl shadow-2xs` inner card. This variant has no shipping-address, contact, payment-method, or order-summary panel and no cancel-order row.
  - Header is `grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-5` with four small-label/value pairs in order: `Status` = a `size-2 bg-green-500` dot plus `Order in progress`; `Order number` = `72813820` (the source uses a non-breaking space in the label); `Order date` = `04/08/2024`; `Total` = `$229`.
  - Inner card opens with two icon lines - a truck icon before `Estimated delivery: Wednesday, Aug 7 2024` (the date is `font-semibold`) and a map-pin icon before `280 Suzanne Throughway, New York, Breannabury, OR 45801, US` - with a secondary-styled `Order details` link button pinned to the right of that row.
  - The status timeline is `grid grid-cols-4 gap-x-1 sm:gap-x-3` with four `h-1.5 rounded-sm` bars: `Order placed` (check icon, bar 100%), `Preparing order` (current step, `text-primary` with an `animate-ping` dot and sr-only `Current`, bar 100% in `bg-primary`), `Shipped` (label `opacity-50`, bar 0%), `Delivered` (label `opacity-50`, bar 0%). Below `md` the labels are replaced by a compact block headed `Order status` showing `Preparing order` on the left and `Shipped` with a next-arrow on the right.
  - Exactly 3 purchased-item rows follow, each `flex flex-row gap-5 pb-6 mb-6 border-b border-line-2` with `last:` resets, a `w-24 sm:w-32` photo at `h-40 object-cover rounded-xl`, and a `sm:grid grid-cols-3 gap-3` detail row labelled `Color`, `Size`, `Quantity`.
  - Item values in order: `Nike SB Zoom Blazer Mid Electric` / `$150` / `White` / `US 10` / `1`; `Windrunner` / `$60` struck through with `$40` in the destructive color / `Gray` / `M` / `1`; `White Jeans` / `$39` / `White` / `M` / `1`. All three use Unsplash photos and none shows a low-stock or remove control.
  - Fully static: no Preline JS plugins, no dropdowns, modals, or overlay triggers anywhere in this variant, and the progress bars are inline `style="width: ..."` values rather than an animated chart.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

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

Create a responsive UI block named "Order Details Summary Card with Actions" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ecommerce/order-tracking-and-details/#order-details-summary-card-with-actions. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: ecommerce/order-tracking-and-details
- Block ID: order-details-summary-card-with-actions
- Source description: Details card combines shipping and payment blocks, an order summary panel, purchased item rows, receipt actions, and cancel-order controls.
- Preview iframe: https://preline.co/blocks/ecommerce/order-tracking-and-details/iframes/pro/order-details-summary-card-with-actions.html (repo path: blocks/ecommerce/order-tracking-and-details/iframes/pro/order-details-summary-card-with-actions.html)
- Source markup reference:
  - partials/pro/storefront/cards/order-cards.html
  - partials/pro/storefront/layouts-components/order-summary.html
  - partials/pro/storefront/sources/simple-icon-list.html
  - partials/pro/storefront/forms/pb-order-status.html
  - partials/pro/storefront/sources/order-details-listing-item.html

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Outer shell is `<div class="p-1.5 space-y-2 bg-surface border border-surface-line rounded-2xl">` holding a bare `py-3 px-4 sm:px-6` header plus two nested `p-4 sm:p-6 bg-layer rounded-xl shadow-2xs` inner cards - the details/summary card first, then the tracking-and-items card.
  - Header is `grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-5`: `Status` = a `size-2 bg-green-500` dot plus `Order in progress`; `Order number` = `72813820`; `Order date` = `04/08/2024`; `Total` = `$229`.
  - First inner card is `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-y-7 gap-x-3`. Column 1 is `Shipping address` listing `James Collins`, `280 Suzanne Throughway`, `New York, Breannabury, OR 45801, US`, then `+44 000 000 0001`, with a small `Change address` pencil button carrying `data-hs-overlay="#hs-pro-sheam"`. Column 2 stacks `Contact details` / `jamescollins@site.so` and `Payment method` / a MasterCard brand SVG in a `p-1 border rounded-md` chip beside `MasterCard •••• 4242` - keep that exact card mark and the bullet glyphs.
  - Column 3 is an unheaded totals list (`Order summary` is passed as a parameter but never rendered): `Subtotal` `$229`, `Shipping` `Free`, `Estimated Tax` `$0`, `Sale` `-$20` in muted text, then `Total` shown as a small `USD` followed by `$229`. Under it, right-aligned, is a `View or Print receipt` button with a printer icon.
  - That card ends with a `pt-6 mt-6 border-t border-line-2` row reading `Something wrong?` plus the underlined link `Exchange or return` with a right chevron, and a right-aligned `Cancel order` button in the destructive text color carrying `data-hs-overlay="#hs-pro-shcom"`.
  - Second inner card opens with a single truck-icon line `Estimated delivery: Wednesday, Aug 7 2024` (date `font-semibold`). This variant shows no address line and no `Order details` button in that row.
  - Then the 4-segment status timeline (`grid grid-cols-4 gap-x-1 sm:gap-x-3`, `h-1.5` bars): `Order placed` (check icon, 100%), `Preparing order` (current, `animate-ping` dot, `bg-primary` at 100%), `Shipped` (`opacity-50`, 0%), `Delivered` (`opacity-50`, 0%); below `md` it collapses to an `Order status` row showing `Preparing order` and `Shipped`.
  - Exactly 3 item rows close the card, each with a `w-24 sm:w-32` photo at `h-40 object-cover rounded-xl` and a `Color` / `Size` / `Quantity` grid: `Nike SB Zoom Blazer Mid Electric` / `$150` / `White` / `US 10` / `1`; `Windrunner` / `$60` struck through with `$40` / `Gray` / `M` / `1`; `White Jeans` / `$39` / `White` / `M` / `1`. The only JS wiring in the block is the two `data-hs-overlay` triggers; their overlay panels are not part of this block.

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