Tailwind CSS Comparison Tables & Size Guides Blocks

All Blocks
Ecommerce
Comparison Tables & Size Guides

Comparison Tables & Size Guides

Comparison tables and size guides for evaluating product options, checking fit, and supporting purchase decisions.

Product Comparison Table with Add Product Slot Pro

Multi-column comparison table aligns product cards, grouped spec rows, stock states, and an empty add-product slot in a scrollable table shell.

Create a responsive UI block named "Product Comparison Table with Add Product Slot" 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/comparison-tables-and-size-guides/#product-comparison-table-with-add-product-slot. 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/comparison-tables-and-size-guides
- Block ID: product-comparison-table-with-add-product-slot
- Source description: Multi-column comparison table aligns product cards, grouped spec rows, stock states, and an empty add-product slot in a scrollable table shell.
- Preview iframe: https://preline.co/blocks/ecommerce/comparison-tables-and-size-guides/iframes/pro/product-comparison-table-with-add-product-slot.html (repo path: blocks/ecommerce/comparison-tables-and-size-guides/iframes/pro/product-comparison-table-with-add-product-slot.html)
- Source markup reference:
  - partials/pro/storefront/tables/compare-shop-products.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):
  - Table has exactly four columns: a label column plus two filled product columns and one trailing empty slot; every `th` is `w-1/4 min-w-56 align-top` and the first header cell is deliberately blank.
  - Product column one is `Slim Lyocell Trousers` at `$69` with five filled stars and the count `(234)`; column two is `Micro Houndstooth Suit Trousers` at `$40` with four filled stars plus one empty star and the count `(675)`. Each product header links to the product detail page and carries a `size-7` round close button in its top trailing corner whose `sr-only` text is `Remove`.
  - The fourth column is the add-product slot: it is not a button or a form - it is a purely decorative `animate-pulse` skeleton (a tall `bg-surface-1 rounded-md` image block over three grey bars at 100%, 50%, and 25% width), and every body row repeats a `w-1/2 h-4 bg-surface-1 rounded-full animate-pulse` placeholder in that column.
  - Four full-width group header rows use `bg-surface` with an empty value cell in each product column: `Availability`, `Size`, `Product properties`, and `Type`.
  - Under `Availability` the single row is labelled `Sportswear Garment` and its values are the amber `Low in stock` with a clock icon and the teal `In stock` with a check icon. Under `Size` the rows are `Size (EU)` (`44, 34, 36, 38, 40, 42` in both columns), `Size (UK)` (`12, 14, 16, 18, 8, 10`), and `Size (US)` (`12, 14, 4, 6, 8, 10`).
  - `Product properties` holds nine rows in this order: `Target Group` (`Men` / `Men`), `Sportswear Garment` (red `No` / `Yes`), `Manufacturer Colour` (`-` / `-`), `Colour` (`Brown` / `Brown`), `Pattern` (`Solid Colour` / `Solid Colour`), `Fit` (`Regular` / `Regular`), `Length` (`Long` / `Long`), `Details` (`Slit` / `Slit`), and `Washing Instructions` (`Handwash, Do Not Bleach, Do Not Dryclean, Iron, Do Not Tumble Dry` / `30ºC, Do Not Tumble Dry`).
  - The `Type` group has one row whose label is `Sweaters & Jackets` with values `Sweater` and `Jacket`.
  - Shell is `bg-layer border border-layer-line rounded-2xl overflow-x-auto` with themed 2px-tall webkit scrollbar utilities, and the table itself is `min-w-full divide-y divide-table-line` with `divide-x divide-table-line` on the rows. Fully static: no Preline JS plugins, no sticky column, no sorting, and the close buttons are not wired to any remove handler.

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="bg-layer border border-layer-line rounded-2xl overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                      <div class="min-w-full inline-block align-middle">
                        
                        <table class="min-w-full divide-y divide-table-line">
                          <thead>
                            <tr class="divide-x divide-table-line">
                              <th scope="col" class="w-1/4 min-w-56 align-top"></th>

<th scope="col" class="w-1/4 min-w-56 align-top">
                                <div class="p-1 relative">
                                  <a class="p-3 block text-start rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/product-detail.html">
                                    <img class="size-full rounded-lg" src="https://images.unsplash.com/photo-1708443683202-a5be0ced5b8b?q=80&w=560&h=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                
                                    <span class="block mt-2 font-normal text-sm md:text-base text-foreground">
                                      Slim Lyocell Trousers
                                    </span>

<div class="mt-3 flex items-center gap-x-0.5">
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <span class="ms-1 text-xs font-normal text-foreground">
                                        (234)
                                      </span>
                                    </div>
                                    
                                  </a>

<div class="absolute top-0 inset-e-0 z-10 pt-6 pe-6">
                                    <button type="button" class="size-7 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer border border-transparent text-layer-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                      <span class="sr-only">Remove</span>
                                    </button>
                                  </div>
                                  
                                </div>
                              </th>

<span class="block mt-2 font-normal text-sm md:text-base text-foreground">
                                      Micro Houndstooth Suit Trousers
                                    </span>

<div class="mt-3 flex items-center gap-x-0.5">
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                      </svg>
                                      <span class="ms-1 text-xs font-normal text-foreground">
                                        (675)
                                      </span>
                                    </div>
                                    
                                  </a>

<tbody class="divide-y divide-table-line">
                            <tr class="bg-surface divide-x divide-table-line">
                              <td>
                                <div class="px-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-foreground">
                                  Availability
                                </div>
                              </td>

<td></td>
                              <td></td>
                              <td></td>
                            </tr>
      
                            <tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Sportswear Garment
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="inline-flex justify-center items-center gap-x-1.5 text-sm text-orange-500">
                                  <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"/><polyline points="12 6 12 12 16 14"/></svg>
                                  Low in stock
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="inline-flex justify-center items-center gap-x-1.5 text-sm text-teal-500">
                                  <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>
                                  In stock
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Size (US)
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  12, 14, 4, 6, 8, 10
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  12, 14, 4, 6, 8, 10
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>
      
                            <tr class="bg-surface divide-x divide-table-line">
                              <td>
                                <div class="px-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-foreground">
                                  Product properties
                                </div>
                              </td>

<td></td>
                              <td></td>
                              <td></td>
                            </tr>
      
                            <tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Target Group  
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Men
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Men
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Sportswear Garment
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="inline-flex justify-center items-center gap-x-1.5 text-sm text-red-500">
                                  <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                  No
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="inline-flex justify-center items-center gap-x-1.5 text-sm text-teal-500">
                                  <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>
                                  Yes
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Manufacturer Colour
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  -
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  -
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Colour
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Brown
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Brown
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Pattern
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Solid Colour
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Solid Colour
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Fit
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Regular
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Regular
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Length
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Long
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Long
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Details
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Slit
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Slit
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Washing Instructions
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Handwash, Do Not Bleach, Do Not Dryclean, Iron, Do Not Tumble Dry
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  30ºC, Do Not Tumble Dry
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>
      
                            <tr class="bg-surface divide-x divide-table-line">
                              <td>
                                <div class="px-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-foreground">
                                  Type
                                </div>
                              </td>

<td></td>
                              <td></td>
                              <td></td>
                            </tr>
      
                            <tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Sweaters & Jackets
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Sweater
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Jacket
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        
                      </div>
                    </div>

Size Guide Measurement Table Pro

Compact size guide table maps body measurements across standard apparel sizes in a horizontally scrollable table.

Create a responsive UI block named "Size Guide Measurement Table" 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/comparison-tables-and-size-guides/#size-guide-measurement-table. 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/comparison-tables-and-size-guides
- Block ID: size-guide-measurement-table
- Source description: Compact size guide table maps body measurements across standard apparel sizes in a horizontally scrollable table.
- Preview iframe: https://preline.co/blocks/ecommerce/comparison-tables-and-size-guides/iframes/pro/size-guide-measurement-table.html (repo path: blocks/ecommerce/comparison-tables-and-size-guides/iframes/pro/size-guide-measurement-table.html)
- Source markup reference:
  - partials/pro/storefront/tables/size-guide.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):
  - Header row has exactly seven cells: the label column `Size` followed by `XXS`, `XS`, `S`, `M`, `L`, `XL` in that order.
  - Body has exactly four measurement rows in this order: `Chest`, `Waist`, `Hip`, `Height`; row labels are `text-xs font-medium text-foreground` while values are `text-xs text-muted-foreground-2`.
  - `Chest` values run `28.1 - 31.5`, `31.5 - 35`, `35 - 37.5`, `37.5 - 41`, `41 - 44`, `44 - 48.5`; `Waist` runs `22.5 - 25.5`, `25.5 - 29`, `29 - 32`, `32 - 35`, `35 - 38`, `38 - 43`; `Hip` runs `28.5 - 31.5`, `31.5 - 35`, `35 - 37.5`, `37.5 - 41`, `41 - 44`, `44 - 47`.
  - The `Height` row is intentionally repetitive: `< 5'7"` for XXS and then the identical `5'7" - 6'0"` for all five remaining sizes - keep the repetition and the straight-quote foot/inch marks exactly.
  - Cells alternate surface tints via `odd:bg-layer even:bg-surface` applied to each `th` and `td` (not to whole rows), and every body cell is `size-px whitespace-nowrap px-4 py-3`.
  - Shell is `border border-layer-line rounded-lg overflow-x-auto` with themed webkit scrollbar utilities so the table scrolls horizontally inside its own card; the table is `min-w-full divide-y divide-table-line`.
  - There is no unit toggle, no cm/inches switcher, no caption, no footnote, and no highlighted or recommended size column.
  - Fully static markup: no Preline JS plugins, no `data-hs-*` attributes, and no hover or selection states on the cells.

<div class="border border-layer-line rounded-lg overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                      <div class="min-w-full inline-block align-middle">
                        
                        <table class="min-w-full divide-y divide-table-line">
                          <thead>
                            <tr>
                              <th scope="col" class="odd:bg-layer even:bg-surface">
                                <div class="px-4 py-3 text-start flex items-center gap-x-1 text-xs font-medium text-foreground">
                                  Size
                                </div>
                              </th>

<tbody class="divide-y divide-table-line">
                            <tr>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs font-medium text-foreground">
                                  Chest
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  28.1 - 31.5
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  31.5 - 35
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  35 - 37.5
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  37.5 - 41
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  41 - 44
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  44 - 48.5
                                </span>
                              </td>
                            </tr>

<tr>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs font-medium text-foreground">
                                  Waist
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  22.5 - 25.5
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  25.5 - 29
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  29 - 32
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  32 - 35
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  35 - 38
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  38 - 43
                                </span>
                              </td>
                            </tr>

<tr>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs font-medium text-foreground">
                                  Height
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  < 5'7"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        
                      </div>
                    </div>