Call-to-Action 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

<div class="relative bg-gray-900 rounded-2xl p-8 text-center overflow-hidden">
  <div class="absolute inset-0">
    <div class="absolute top-0 left-1/4 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl"></div>
    <div class="absolute bottom-0 right-1/4 w-48 h-48 bg-purple-500/20 rounded-full blur-3xl"></div>
  </div>
  
  <div class="relative">
    <div class="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/30">
      <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
      </svg>
    </div>
    
    <h3 class="text-2xl font-bold text-white mb-3">Ready to Get Started?</h3>
    <p class="text-gray-400 mb-6 max-w-md mx-auto">Join thousands of developers who are building better products with our components. Start your free trial today.</p>
    
    <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
      <button class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-blue-500/30">
        Start Free Trial
      </button>
      <button class="w-full sm:w-auto px-8 py-4 border border-gray-700 text-white font-medium rounded-xl hover:bg-gray-800 transition-colors">
        Schedule Demo
      </button>
    </div>
    
    <div class="flex items-center justify-center gap-6 text-sm text-gray-500">
      <span class="flex items-center gap-2">
        <svg class="w-5 h-5 text-green-500" 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>
        No credit card required
      </span>
      <span class="flex items-center gap-2">
        <svg class="w-5 h-5 text-green-500" 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>
        14-day free trial
      </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

# CTA Card

Call-to-action focused card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Strong CTA emphasis
- Supporting copy + action

## Usage

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

Copy from `code.html`.

## Customization

- CTA button colors, card surface, spacing

## Accessibility

- CTA should be a real `<button>` or `<a>`

## Dependencies

- Tailwind CSS only

## File Structure

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