Project 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
59
60
61
62
63

<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden hover:shadow-lg transition-all group">
  <div class="relative h-36 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
    <div class="absolute inset-0 flex items-center justify-center">
      <svg class="w-16 h-16 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
      </svg>
    </div>
    <div class="absolute top-3 right-3">
      <button class="p-2 bg-white/20 backdrop-blur rounded-lg text-white hover:bg-white/30 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"/>
        </svg>
      </button>
    </div>
  </div>
  
  <div class="p-5">
    <div class="flex items-start justify-between mb-2">
      <div>
        <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Website Redesign</h3>
        <p class="text-sm text-gray-500">Marketing Website • Q1 2025</p>
      </div>
      <span class="px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded-full">In Progress</span>
    </div>
    
    <p class="text-sm text-gray-600 mb-4 line-clamp-2">Complete redesign of the company marketing website with new brand guidelines and improved UX.</p>
    
    <div class="flex items-center gap-4 text-sm text-gray-500 mb-4">
      <div class="flex items-center gap-1">
        <svg class="w-4 h-4" 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>
        <span>24 tasks</span>
      </div>
      <div class="flex items-center gap-1">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        <span>Due Feb 28</span>
      </div>
    </div>
    
    <div class="mb-4">
      <div class="flex justify-between text-xs text-gray-500 mb-1.5">
        <span>Progress</span>
        <span>68%</span>
      </div>
      <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
        <div class="h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full" style="width: 68%"></div>
      </div>
    </div>
    
    <div class="flex items-center justify-between pt-4 border-t border-gray-100">
      <div class="flex -space-x-2">
        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces" class="w-8 h-8 rounded-full border-2 border-white" alt="">
        <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&h=64&fit=crop&crop=faces" class="w-8 h-8 rounded-full border-2 border-white" alt="">
        <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=64&h=64&fit=crop&crop=faces" class="w-8 h-8 rounded-full border-2 border-white" alt="">
        <div class="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-600">+5</div>
      </div>
      <button class="text-sm text-blue-600 font-medium hover:text-blue-700">Open →</button>
    </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

# Project Card

Project summary card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Project title and status
- Meta / progress affordances

## Usage

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

Copy from `code.html`.

## Customization

- Status colors, typography, spacing

## Accessibility

- Do not rely on color alone for status

## Dependencies

- Tailwind CSS only

## File Structure

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