Support Ticket 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

<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
  <div class="p-5 border-b border-gray-100">
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
          <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
          </svg>
        </div>
        <div>
          <p class="text-xs text-gray-500">Ticket #2847</p>
          <h4 class="font-semibold text-gray-900">Payment Failed</h4>
        </div>
      </div>
      <span class="px-3 py-1 bg-red-100 text-red-700 text-xs font-semibold rounded-full">High Priority</span>
    </div>
    
    <div class="flex items-center gap-4 text-xs text-gray-500">
      <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        Opened 2h ago
      </span>
      <span>•</span>
      <span>Customer: john@example.com</span>
    </div>
  </div>
  
  <div class="p-5">
    <p class="text-sm text-gray-700 mb-4">I tried to upgrade my subscription but my payment was declined. I've tried three different cards and all show the same error. This is urgent as my team needs access to the premium features.</p>
    
    <div class="bg-gray-50 rounded-xl p-4 mb-4">
      <div class="flex items-start gap-3">
        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64&h=64&fit=crop&crop=faces" alt="Agent" class="w-8 h-8 rounded-full object-cover">
        <div class="flex-1">
          <div class="flex items-center gap-2 mb-1">
            <span class="text-sm font-medium text-gray-900">Support Agent</span>
            <span class="text-xs text-gray-500">• 1h ago</span>
          </div>
          <p class="text-sm text-gray-600">Hi, I apologize for the inconvenience. I'm looking into this issue right now. Could you please confirm which payment method you'd like to use?</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="px-5 py-4 bg-gray-50/50 border-t border-gray-100 flex items-center justify-between">
    <div class="flex gap-2">
      <button class="px-4 py-2 border border-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors">
        Reply
      </button>
      <button class="px-4 py-2 border border-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors">
        Escalate
      </button>
    </div>
    <button class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors">
      Resolve
    </button>
  </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

# Support Ticket Card

Support ticket summary card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Ticket id / subject
- Status and priority cues

## Usage

```bash
npx devsnips add Tailwind/Components/Cards/support-ticket-card
```

Copy from `code.html`.

## Customization

- Status colors, typography

## Accessibility

- Do not rely on color alone for status/priority

## Dependencies

- Tailwind CSS only

## File Structure

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