Achievement 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

<div class="relative bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl p-6 border border-amber-100 overflow-hidden">
  <div class="absolute top-0 right-0 w-40 h-40 bg-amber-200/30 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
  
  <div class="relative text-center">
    <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-amber-400 to-amber-600 rounded-full flex items-center justify-center shadow-lg shadow-amber-500/30 transform rotate-3">
      <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
      </svg>
    </div>
    
    <span class="inline-block px-3 py-1 bg-amber-200/50 text-amber-800 text-xs font-semibold rounded-full mb-3">ACHIEVEMENT UNLOCKED</span>
    
    <h3 class="text-xl font-bold text-gray-900 mb-2">Top Contributor</h3>
    <p class="text-sm text-gray-600 mb-4">You've been recognized as a top contributor this month with 47 accepted solutions.</p>
    
    <div class="flex items-center justify-center gap-6 py-4 border-t border-amber-200/50">
      <div class="text-center">
        <p class="text-2xl font-bold text-amber-600">47</p>
        <p class="text-xs text-gray-500">Solutions</p>
      </div>
      <div class="text-center">
        <p class="text-2xl font-bold text-amber-600">98%</p>
        <p class="text-xs text-gray-500">Rating</p>
      </div>
      <div class="text-center">
        <p class="text-2xl font-bold text-amber-600">#3</p>
        <p class="text-xs text-gray-500">Rank</p>
      </div>
    </div>
    
    <button class="w-full py-2.5 bg-gradient-to-r from-amber-500 to-amber-600 text-white font-semibold rounded-xl hover:opacity-90 transition-opacity">
      Share Achievement
    </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
37
38

# Achievement Card

Card for highlighting achievements, badges, or milestones.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Achievement / badge presentation
- Clear hierarchy for title and supporting text
- Optional icon or media region

## Usage

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

Copy from `code.html` into a Tailwind project.

## Customization

- Colors, radius, shadow, spacing, typography

## Accessibility

- Prefer real headings for titles
- Decorative icons should be `aria-hidden`

## Dependencies

- Tailwind CSS only

## File Structure

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