Task 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

<div class="group bg-white rounded-xl border border-gray-100 shadow-sm p-4 hover:shadow-md hover:border-gray-200 transition-all cursor-pointer">
  <div class="flex items-start gap-3">
    <button class="mt-1 w-5 h-5 rounded border-2 border-gray-300 hover:border-blue-500 hover:bg-blue-50 flex items-center justify-center transition-colors shrink-0">
    </button>
    
    <div class="flex-1 min-w-0">
      <h4 class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2">Design new landing page mockups for Q1 campaign</h4>
      
      <div class="flex items-center gap-3 mt-2 text-xs text-gray-500">
        <span class="px-2 py-0.5 bg-purple-100 text-purple-700 rounded">Design</span>
        <span class="flex items-center gap-1">
          <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="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>
          Jan 20
        </span>
      </div>
      
      <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-50">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces" class="w-6 h-6 rounded-full object-cover">
          <span class="text-xs text-gray-500">Sarah M.</span>
        </div>
        
        <div class="flex items-center gap-2">
          <button class="p-1 hover:bg-gray-100 rounded text-gray-400 hover:text-gray-600 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
            </svg>
          </button>
          <span class="text-xs text-gray-400">3</span>
          
          <button class="p-1 hover:bg-gray-100 rounded text-gray-400 hover:text-gray-600 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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
            </svg>
          </button>
          <span class="text-xs text-gray-400">2</span>
        </div>
      </div>
    </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

# Task Card

Task / to-do card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Task title and meta
- Status / assignee affordances

## Usage

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

Copy from `code.html`.

## Customization

- Checkbox / status styles, spacing

## Accessibility

- Interactive controls must be native and labeled

## Dependencies

- Tailwind CSS only

## File Structure

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