Dashboard Stat Card

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
  <div class="flex items-start justify-between mb-4">
    <div class="p-2.5 rounded-xl bg-blue-50">
      <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
    </div>
    <span class="flex items-center gap-1 text-sm font-medium text-green-600 bg-green-50 px-2.5 py-1 rounded-full">
      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
      </svg>
      12.5%
    </span>
  </div>
  
  <p class="text-sm text-gray-500 font-medium mb-1">Total Revenue</p>
  <div class="flex items-baseline gap-2">
    <span class="text-3xl font-bold text-gray-900">$48,294</span>
    <span class="text-sm text-gray-400">this month</span>
  </div>
  
  <div class="mt-4 pt-4 border-t border-gray-100">
    <div class="flex items-center justify-between text-sm">
      <span class="text-gray-500">vs last month</span>
      <span class="font-semibold text-gray-900">$42,928</span>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# Dashboard Stat Card

Dashboard statistic card for KPI tiles.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Large metric value
- Label and optional delta

## Usage

```bash
npx devsnips add Tailwind/Components/Cards/dashboard-stat-card
```

Copy from `code.html`.

## Customization

- Metric typography, accent colors

## Accessibility

- Do not convey meaning by color alone

## Dependencies

- Tailwind CSS only

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`