Minimal Card

1
2
3
4
5
6
7
8

<div class="bg-white rounded-lg p-5">
  <div class="flex items-center justify-between mb-3">
    <span class="text-xs font-medium text-gray-400 uppercase tracking-wider">Total Revenue</span>
    <span class="w-2 h-2 bg-green-500 rounded-full"></span>
  </div>
  <p class="text-3xl font-bold text-gray-900">$48,294</p>
  <p class="text-sm text-gray-500 mt-1">+$2,450 this week</p>
</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

# Minimal Card

Minimal content card with restrained chrome.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Minimal surface
- Clear title / body hierarchy

## Usage

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

Copy from `code.html`.

## Customization

- Border, radius, spacing, typography

## Accessibility

- Prefer real headings for titles

## Dependencies

- Tailwind CSS only

## File Structure

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