dashboardsBeginner

Dashboard Stat Card V3

Stat card with leading icon and category tag.

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 dashboard stat card with Tailwind: leading icon in a colored tint, category tag, big numeric value, and a percent-change line.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/stats/3.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-dash-stat-3
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto flex max-w-lg flex-col gap-4 p-6 w-full">
<article class="flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6">
      <div>
        <p class="text-sm text-gray-500">Profit</p>

        <p class="text-2xl font-medium text-gray-900">$240.94</p>
      </div>

      <div class="inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
          />
        </svg>

        <span class="text-xs font-medium"> 67.81% </span>
      </div>
    </article>

    <article class="flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6">
      <div>
        <p class="text-sm text-gray-500">Profit</p>

        <p class="text-2xl font-medium text-gray-900">$240.94</p>
      </div>

      <div class="inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
          />
        </svg>

        <span class="text-xs font-medium"> 67.81% </span>
      </div>
    </article>
  </div>
</div>