statsBeginner

Stats Row

A row of three big-number stats with labels.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a stats row with Tailwind: three columns on md+ (stacked on mobile), each with a giant numeric value (text-4xl+, bold) on top and a small uppercase label below in a muted color. Add a subtle top and bottom border so it reads as a horizontal band when placed mid-page.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/stats/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-stats-row
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class=" w-full">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
      <div class="mx-auto max-w-3xl text-center">
        <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">
          Trusted by eCommerce Businesses
        </h2>

        <p class="mt-4 text-gray-500 sm:text-xl">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
          provident impedit esse recusandae facere libero harum sequi.
        </p>
      </div>

      <dl class="mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:grid-cols-4">
        <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
          <dt class="order-last text-lg font-medium text-gray-500">Total Sales</dt>

          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">$4.8m</dd>
        </div>

        <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
          <dt class="order-last text-lg font-medium text-gray-500">Official Addons</dt>

          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">24</dd>
        </div>

        <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
          <dt class="order-last text-lg font-medium text-gray-500">Total Addons</dt>

          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86</dd>
        </div>

        <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
          <dt class="order-last text-lg font-medium text-gray-500">Downloads</dt>

          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86k</dd>
        </div>
      </dl>
    </div>
  </div>
</div>