Error Modal

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
64
65
66
67
68
69
70
71
72
73
74
75

<!-- Error Modal -->
<div id="error-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onclick="closeModal('error-modal')"></div>
  
  <!-- Modal Container -->
  <div class="fixed inset-0 flex items-center justify-center p-4">
    <div class="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-lg transform transition-all" role="alertdialog" aria-modal="true" aria-labelledby="error-modal-title">
      
      <!-- Error Header -->
      <div class="bg-gradient-to-r from-red-500 to-rose-600 p-5 rounded-t-2xl">
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-white/20 backdrop-blur rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-white" 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>
            <h3 id="error-modal-title" class="text-lg font-semibold text-white">Payment Failed</h3>
            <p class="text-red-100 text-sm">Error Code: PAY_7823</p>
          </div>
        </div>
      </div>
      
      <!-- Error Details -->
      <div class="p-6">
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-800 rounded-xl p-4 mb-4">
          <p class="text-sm text-red-800 dark:text-red-300 font-medium mb-2">What went wrong:</p>
          <p class="text-sm text-red-700 dark:text-red-400">Your card was declined by the issuing bank. This could be due to insufficient funds, card expiration, or fraud protection measures.</p>
        </div>
        
        <!-- Error Actions -->
        <div class="space-y-3">
          <button onclick="closeModal('error-modal')" class="w-full flex items-center gap-3 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
              </svg>
            </div>
            <div class="text-left">
              <p class="text-sm font-medium text-gray-900 dark:text-white">Try Another Card</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Use a different payment method</p>
            </div>
            <svg class="w-5 h-5 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
          </button>
          
          <button onclick="closeModal('error-modal')" class="w-full flex items-center gap-3 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            <div class="w-10 h-10 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.41l.001-.001a1 1 0 011.414 0l.001.001c.39.39.39 1.024 0 1.415l-.001.001a1 1 0 01-1.414 0l-.001-.001a1 1 0 010-1.415zM12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <div class="text-left">
              <p class="text-sm font-medium text-gray-900 dark:text-white">Contact Support</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Get help from our billing team</p>
            </div>
            <svg class="w-5 h-5 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
          </button>
        </div>
      </div>
      
      <!-- Footer -->
      <div class="p-6 pt-0">
        <button onclick="closeModal('error-modal')" class="w-full py-3 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Dismiss</button>
      </div>
    </div>
  </div>
</div>

<!-- Demo Trigger Button -->
<button onclick="openModal('error-modal')" class="px-6 py-3 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Open Error Modal</button>

1
2
3
4
5
6
7
8
9
10
11
12

# Error Modal

Error state modal.

## Usage
```bash
npx devsnips add Tailwind/Components/Modals/error-modal
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`