Timeline 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

<div class="relative bg-white rounded-2xl border border-gray-100 shadow-sm p-5">
  <div class="absolute left-8 top-5 bottom-5 w-0.5 bg-gray-100"></div>
  
  <div class="relative flex items-start gap-6 pb-6">
    <div class="relative z-10 w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center shrink-0">
      <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
    </div>
    <div class="flex-1 pt-2">
      <div class="flex items-center gap-2 mb-1">
        <span class="text-xs text-gray-500">January 15, 2025</span>
      </div>
      <h4 class="font-semibold text-gray-900">Project Launched Successfully</h4>
      <p class="text-sm text-gray-500 mt-1">The new dashboard was deployed to production with zero downtime.</p>
    </div>
  </div>
  
  <div class="relative flex items-start gap-6 pb-6">
    <div class="relative z-10 w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center shrink-0">
      <svg class="w-7 h-7 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
    </div>
    <div class="flex-1 pt-2">
      <div class="flex items-center gap-2 mb-1">
        <span class="text-xs text-gray-500">January 10, 2025</span>
      </div>
      <h4 class="font-semibold text-gray-900">Design Review Completed</h4>
      <p class="text-sm text-gray-500 mt-1">Final design mockups approved by stakeholders.</p>
    </div>
  </div>
  
  <div class="relative flex items-start gap-6">
    <div class="relative z-10 w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center shrink-0">
      <svg class="w-7 h-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
      </svg>
    </div>
    <div class="flex-1 pt-2">
      <div class="flex items-center gap-2 mb-1">
        <span class="text-xs text-gray-500">January 5, 2025</span>
      </div>
      <h4 class="font-semibold text-gray-900">Project Planning Started</h4>
      <p class="text-sm text-gray-500 mt-1">Initial requirements gathering and project scope defined.</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

# Timeline Card

Timeline event card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Time marker
- Event title and body

## Usage

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

Copy from `code.html`.

## Customization

- Marker colors, typography, spacing

## Accessibility

- Keep chronological text readable without relying on visual markers alone

## Dependencies

- Tailwind CSS only

## File Structure

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