Newsletter 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

<div class="relative bg-gradient-to-br from-violet-600 via-purple-600 to-indigo-700 rounded-2xl p-6 overflow-hidden">
  <div class="absolute inset-0">
    <div class="absolute top-10 right-10 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
    <div class="absolute bottom-10 left-10 w-24 h-24 bg-pink-500/20 rounded-full blur-2xl"></div>
  </div>
  
  <div class="relative">
    <div class="w-14 h-14 bg-white/20 backdrop-blur rounded-2xl flex items-center justify-center mb-5">
      <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
      </svg>
    </div>
    
    <h3 class="text-xl font-bold text-white mb-2">Stay in the Loop</h3>
    <p class="text-white/80 text-sm mb-5">Get weekly updates on new components, design trends, and exclusive content. No spam, unsubscribe anytime.</p>
    
    <form class="space-y-3">
      <input type="email" placeholder="Enter your email" class="w-full px-4 py-3 bg-white/10 backdrop-blur border border-white/20 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/50">
      <button type="submit" class="w-full py-3 bg-white text-purple-700 font-semibold rounded-xl hover:bg-white/90 transition-colors">
        Subscribe Now
      </button>
    </form>
    
    <div class="flex items-center justify-center gap-6 mt-5 text-xs text-white/60">
      <span class="flex items-center gap-1">
        <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="M5 13l4 4L19 7"/>
        </svg>
        Free forever
      </span>
      <span class="flex items-center gap-1">
        <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="M5 13l4 4L19 7"/>
        </svg>
        Weekly updates
      </span>
      <span class="flex items-center gap-1">
        <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="M5 13l4 4L19 7"/>
        </svg>
        12k+ subscribers
      </span>
    </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

# Newsletter Card

Newsletter signup card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Email capture layout
- Supporting copy + CTA

## Usage

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

Copy from `code.html`.

## Customization

- Form field and button styles, spacing

## Accessibility

- Label the email field; button must be a real submit/button

## Dependencies

- Tailwind CSS only

## File Structure

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