Analytics 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
  <div class="p-5 border-b border-gray-100 flex items-center justify-between">
    <div>
      <h3 class="font-semibold text-gray-900">Traffic Overview</h3>
      <p class="text-sm text-gray-500">Last 30 days performance</p>
    </div>
    <select class="text-sm bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
      <option>Last 30 days</option>
      <option>Last 7 days</option>
      <option>Last 90 days</option>
    </select>
  </div>
  
  <div class="p-5">
    <div class="flex items-end gap-6 mb-6">
      <div>
        <p class="text-sm text-gray-500 mb-1">Total Visitors</p>
        <p class="text-3xl font-bold text-gray-900">284,521</p>
        <p class="text-sm text-green-600 font-medium mt-1">↑ 18.2% vs last period</p>
      </div>
    </div>
    
    <div class="h-32 flex items-end gap-1">
      <div class="flex-1 bg-blue-200 rounded-t" style="height: 45%"></div>
      <div class="flex-1 bg-blue-300 rounded-t" style="height: 60%"></div>
      <div class="flex-1 bg-blue-300 rounded-t" style="height: 55%"></div>
      <div class="flex-1 bg-blue-400 rounded-t" style="height: 70%"></div>
      <div class="flex-1 bg-blue-400 rounded-t" style="height: 65%"></div>
      <div class="flex-1 bg-blue-500 rounded-t" style="height: 85%"></div>
      <div class="flex-1 bg-blue-500 rounded-t" style="height: 78%"></div>
      <div class="flex-1 bg-blue-600 rounded-t" style="height: 90%"></div>
      <div class="flex-1 bg-blue-600 rounded-t" style="height: 95%"></div>
      <div class="flex-1 bg-blue-700 rounded-t" style="height: 100%"></div>
    </div>
    
    <div class="flex justify-between mt-2 text-xs text-gray-400">
      <span>Jan 1</span>
      <span>Jan 10</span>
      <span>Jan 20</span>
      <span>Jan 30</span>
    </div>
  </div>
  
  <div class="px-5 pb-5 grid grid-cols-3 gap-4">
    <div class="bg-gray-50 rounded-xl p-3 text-center">
      <p class="text-lg font-bold text-gray-900">4.2m</p>
      <p class="text-xs text-gray-500">Page Views</p>
    </div>
    <div class="bg-gray-50 rounded-xl p-3 text-center">
      <p class="text-lg font-bold text-gray-900">68%</p>
      <p class="text-xs text-gray-500">Bounce Rate</p>
    </div>
    <div class="bg-gray-50 rounded-xl p-3 text-center">
      <p class="text-lg font-bold text-gray-900">3:42</p>
      <p class="text-xs text-gray-500">Avg. Time</p>
    </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

# Analytics Card

Metric / analytics summary card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Metric value + label
- Optional trend / delta treatment

## Usage

```bash
npx devsnips add Tailwind/Components/Cards/analytics-card
```

Copy from `code.html`.

## Customization

- Number typography, accent colors, padding

## Accessibility

- Do not rely on color alone for trend direction

## Dependencies

- Tailwind CSS only

## File Structure

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