Notification 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

<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
  <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
    <div class="flex items-center gap-3">
      <div class="relative">
        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
          <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
          </svg>
        </div>
        <span class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">3</span>
      </div>
      <div>
        <h3 class="font-semibold text-gray-900">Notifications</h3>
        <p class="text-xs text-gray-500">Recent activity</p>
      </div>
    </div>
    <button class="text-sm text-blue-600 font-medium hover:text-blue-700">Mark all read</button>
  </div>
  
  <div class="divide-y divide-gray-50">
    <div class="px-5 py-4 flex items-start gap-4 bg-blue-50/30">
      <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center shrink-0">
        <svg class="w-5 h-5 text-green-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 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-semibold">Payment received</span> of $2,450 from Acme Corp</p>
        <p class="text-xs text-gray-500 mt-1">2 minutes ago</p>
      </div>
    </div>
    
    <div class="px-5 py-4 flex items-start gap-4">
      <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces" alt="" class="w-10 h-10 rounded-full object-cover shrink-0">
      <div class="flex-1 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-semibold">Sarah Mitchell</span> commented on your design</p>
        <p class="text-xs text-gray-500 mt-1">15 minutes ago</p>
      </div>
    </div>
    
    <div class="px-5 py-4 flex items-start gap-4">
      <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center shrink-0">
        <svg class="w-5 h-5 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 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-semibold">Reminder:</span> Team meeting in 30 minutes</p>
        <p class="text-xs text-gray-500 mt-1">1 hour ago</p>
      </div>
    </div>
  </div>
  
  <div class="px-5 py-3 border-t border-gray-100">
    <a href="#" class="text-sm text-blue-600 font-medium hover:text-blue-700">View all notifications →</a>
  </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

# Notification Card

In-app notification card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Icon / status + message
- Timestamp / actions

## Usage

```bash
npx devsnips add Tailwind/Components/Cards/notification-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`