Vibedex.io
Back to gallery
statsBeginner

Stats — Dark with Icons

Dark-mode 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 dark stats row with Tailwind: gray-900 background, stat cards each with a leading icon, big number, and small label.

Code

html
<!--
  Source: Mert Cukuren (Tailblocks)
  https://github.com/mertJF/tailblocks/blob/master/src/blocks/statistic/dark/b.js
  License: MIT
  Surfaced via https://vibedex.io/components/tailblocks-stat-dark-b
-->
<div class="bg-gray-900 text-gray-300 min-h-screen flex items-center justify-center">
  <div class="w-full">
<section class="text-gray-400 bg-gray-900 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-white">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-white">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-white">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-white">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-white">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-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=600&h=300"
            alt="stats"
          />
        </div>
      </div>
    </section>
  </div>
</div>