Tailwind CSS KPI Card
A KPI card for Tailwind CSS. Use it on dashboards to show one metric and how it moved, like revenue or active users. Built with the card and button components.
<div class="grid w-full max-w-3xl gap-4 sm:grid-cols-3">
<div class="card card-sm">
<div class="card-header">
<p class="card-description">Visitors</p>
<h3 class="card-title text-2xl font-semibold tabular-nums">128.6K</h3>
<div class="card-action">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon -m-2 text-muted-foreground"
aria-label="Open menu for Visitors"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<div class="card-footer gap-1.5 text-muted-foreground">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4 text-emerald-600 dark:text-emerald-400"
>
<path d="M16 7h6v6"></path>
<path d="m22 7-8.5 8.5-5-5L2 17"></path></svg
><span class="font-medium text-emerald-600 dark:text-emerald-400"
>24.7%</span
>vs last month
</div>
</div>
<div class="card card-sm">
<div class="card-header">
<p class="card-description">Page views</p>
<h3 class="card-title text-2xl font-semibold tabular-nums">389.1K</h3>
<div class="card-action">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon -m-2 text-muted-foreground"
aria-label="Open menu for Page views"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<div class="card-footer gap-1.5 text-muted-foreground">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4 text-red-600 dark:text-red-400"
>
<path d="M16 17h6v-6"></path>
<path d="m22 17-8.5-8.5-5 5L2 7"></path></svg
><span class="font-medium text-red-600 dark:text-red-400">2.4%</span>vs
last month
</div>
</div>
<div class="card card-sm">
<div class="card-header">
<p class="card-description">Bounce rate</p>
<h3 class="card-title text-2xl font-semibold tabular-nums">27.11%</h3>
<div class="card-action">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon -m-2 text-muted-foreground"
aria-label="Open menu for Bounce rate"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<div class="card-footer gap-1.5 text-muted-foreground">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4 text-emerald-600 dark:text-emerald-400"
>
<path d="M16 7h6v6"></path>
<path d="m22 7-8.5 8.5-5-5L2 17"></path></svg
><span class="font-medium text-emerald-600 dark:text-emerald-400"
>1.7%</span
>vs last month
</div>
</div>
</div>