Stats
Tailwind CSS stats sections, metric grids, rating highlights, and growth counters for marketing pages.
One large rating sits beside a smaller review block, with a divider separating the two values.
Metric blocks repeat in a simple row, with each value stacked above a short label.
` with no font-weight utility, so they inherit the default weight; labels are `mt-5 text-sm sm:text-base text-foreground` and are not muted.
- Dividers are rotated pseudo-elements, not real borders: `first:before:hidden before:absolute before:-top-full sm:before:top-1/2 before:h-20 before:border-s before:border-line-2 before:rotate-60 sm:before:rotate-12`, sitting above each stat on mobile and to its left from `sm` up.
- Fully static; there is no chart, icon, image, counter animation, or Preline JS plugin in this block.
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.
We cut through complexity, empowering businesses to challenge the status quo, create unlimited opportunities – and change the world.
2,000+
Preline partners
85%
Happy customers
$55M+
Ads managed yearly
We cut through complexity, empowering businesses to challenge the status quo, create unlimited opportunities – and change the world.
2,000+
Preline partners
85%
Happy customers
$55M+
Ads managed yearly
Tight stat columns pair oversized values with short monospace labels in one horizontal row.
` then ``. Do not invert to value-then-label.
- Label and value pairs in order: `Monthly Page Views` / `70 million`, `Average Monthly Users` / `5 million`, `Total App Downloads` / `125k thousand`, `Average App Rating` / `4.85`, `Total sales` / `3 million`, `Years of experience` / `35`.
- Copy the value strings verbatim, including the redundant `125k thousand`; the values are plain text, not numeric counters.
- The grid is 2 columns at base width and 3 from `md` up; there are no dividers, borders, cards, or backgrounds around the cells.
- Fully static; no icons, images, charts, links, or Preline JS plugins.
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.
Monthly Page Views
Average Monthly Users
Total App Downloads
Average App Rating
Total sales
Years of experience
Two larger stat columns sit side by side, with a divider line separating the values.
90%
time savings
Reduction of time spent creating content
35%
savings
Hiring flexible talent compared to salaries
70%
brand awareness
Customers say they have a better brand experience
Three stat columns repeat in one row, with the labels and values stacked in matching blocks.
Accuracy rate
99.95%
in fulfilling orders
Startup businesses
2,000+
partner with Preline
Happy customer
85%
this year alone
One oversized metric leads the section, with three smaller stat blocks grouped next to it.
92% +7% this month
of U.S. adults have bought from businesses using Space
99.95%
in fulfilling orders
2,000+
partner with Preline
85%
this year alone
Each metric sits inside its own bordered card, with the cards grouped into one row.
` with `mt-1 text-sm sm:text-base text-muted-foreground-1` labels, grouped in an `mt-3 sm:mt-5` container under the icon or avatars.
- Dividers are rotated pseudo-elements, not real borders: `first:before:hidden before:absolute before:-top-full sm:before:top-1/2 before:h-20 before:border-s before:border-line-2 before:rotate-60 sm:before:rotate-12`.
- Fully static; there is no chart, sparkline, counter animation, or Preline JS plugin in this block.
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.
2,000+
Preline partners
85%
Happy customers
$55M+
Ads managed yearly
2,000+
Preline partners
85%
Happy customers
$55M+
Ads managed yearly