Cookie Consent 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

<!-- Cookie Consent Modal -->
<div id="cookie-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/50 backdrop-blur-sm"></div>
  
  <!-- Modal Container -->
  <div class="fixed bottom-0 left-0 right-0 p-4">
    <div class="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl max-w-4xl mx-auto overflow-hidden" role="dialog" aria-modal="true">
      <div class="p-6 md:p-8">
        <div class="flex flex-col md:flex-row md:items-center gap-6">
          <!-- Icon -->
          <div class="flex-shrink-0">
            <div class="w-16 h-16 bg-amber-100 dark:bg-amber-900/30 rounded-2xl flex items-center justify-center">
              <svg class="w-8 h-8 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
          </div>
          
          <!-- Content -->
          <div class="flex-1">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">We value your privacy</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4">We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.</p>
            
            <!-- Cookie Options -->
            <div class="flex flex-wrap gap-3 mb-4">
              <button class="px-4 py-2 text-sm font-medium text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors">Manage Preferences</button>
              <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Cookie Policy</button>
            </div>
          </div>
          
          <!-- Actions -->
          <div class="flex flex-col sm:flex-row gap-3 md:flex-col lg:flex-row">
            <button onclick="closeModal('cookie-modal')" class="px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors whitespace-nowrap">Reject All</button>
            <button onclick="closeModal('cookie-modal')" class="px-6 py-3 text-sm font-medium text-white bg-amber-600 rounded-xl hover:bg-amber-700 transition-colors shadow-lg shadow-amber-500/30 whitespace-nowrap">Accept All</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

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

# Cookie Consent Modal

Cookie consent dialog.

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

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