Vibedex.io
Back to gallery
statsBeginner

Stats — With Icons

KPI stats with leading icons.

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: 3-4 stat cards each with a leading icon, big number, and small label. Used in About / Customers sections.

Code

html
<!--
  Source: Mert Cukuren (Tailblocks)
  https://github.com/mertJF/tailblocks/blob/master/src/blocks/statistic/light/b.js
  License: MIT
  Surfaced via https://vibedex.io/components/tailblocks-stat-light-b
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="w-full">
<section class="text-gray-600 body-font">
      <div class="container px-5 py-24 mx-auto flex flex-wrap">
        <div class="flex flex-wrap -mx-4 mt-auto mb-auto lg:w-1/2 sm:w-2/3 content-start sm:pr-10">
          <div class="w-full sm:p-4 px-4 mb-6">
            <h1 class="title-font font-medium text-xl mb-2 text-gray-900">Switching to this team transformed how we ship. The tooling is sharp, the people are sharper, and the work feels right every time.</h1>
            <div class="leading-relaxed">Six months in and the velocity is hard to believe. We went from a feature every two weeks to a feature every two days.</div>
          </div>
          <div class="p-4 sm:w-1/2 lg:w-1/4 w-1/2">
            <h2 class="title-font font-medium text-3xl text-gray-900">
              2.7K
            </h2>
            <p class="leading-relaxed">Users</p>
          </div>
          <div class="p-4 sm:w-1/2 lg:w-1/4 w-1/2">
            <h2 class="title-font font-medium text-3xl text-gray-900">
              1.8K
            </h2>
            <p class="leading-relaxed">Subscribes</p>
          </div>
          <div class="p-4 sm:w-1/2 lg:w-1/4 w-1/2">
            <h2 class="title-font font-medium text-3xl text-gray-900">
              35
            </h2>
            <p class="leading-relaxed">Downloads</p>
          </div>
          <div class="p-4 sm:w-1/2 lg:w-1/4 w-1/2">
            <h2 class="title-font font-medium text-3xl text-gray-900">4</h2>
            <p class="leading-relaxed">Products</p>
          </div>
        </div>
        <div class="lg:w-1/2 sm:w-1/3 w-full rounded-lg overflow-hidden mt-6 sm:mt-0">
          <img
            class="object-cover object-center w-full h-full"
            src="https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?auto=format&fit=crop&q=80&w=600&h=300"
            alt="stats"
          />
        </div>
      </div>
    </section>
  </div>
</div>