Weather 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<div class="relative bg-gradient-to-br from-sky-400 via-sky-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden">
  <div class="absolute top-0 right-0 w-48 h-48 bg-white/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
  <div class="absolute bottom-0 left-0 w-32 h-32 bg-blue-700/30 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"></div>
  
  <div class="relative">
    <div class="flex items-center justify-between mb-6">
      <div>
        <p class="text-white/80 text-sm">San Francisco, CA</p>
        <p class="text-xs text-white/60">Monday, January 15</p>
      </div>
      <button class="p-2 hover:bg-white/10 rounded-full transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
        </svg>
      </button>
    </div>
    
    <div class="flex items-center justify-between mb-8">
      <div>
        <p class="text-7xl font-bold">72°</p>
        <p class="text-white/80 mt-1">Partly Cloudy</p>
        <p class="text-xs text-white/60 mt-1">H: 78° L: 65°</p>
      </div>
      <div class="text-right">
        <svg class="w-24 h-24 text-yellow-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69l-1.414 1.41m12.786-1.41 1.414 1.41M22 12h-2"/>
          <circle cx="12" cy="12" r="4"/>
        </svg>
      </div>
    </div>
    
    <div class="grid grid-cols-4 gap-3">
      <div class="bg-white/10 backdrop-blur rounded-xl p-3 text-center">
        <p class="text-xs text-white/60">Tue</p>
        <svg class="w-6 h-6 mx-auto my-2 text-white/80" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69l-1.414 1.41m12.786-1.41 1.414 1.41M22 12h-2"/>
          <circle cx="12" cy="12" r="4"/>
        </svg>
        <p class="text-sm font-semibold">76°</p>
      </div>
      <div class="bg-white/10 backdrop-blur rounded-xl p-3 text-center">
        <p class="text-xs text-white/60">Wed</p>
        <svg class="w-6 h-6 mx-auto my-2 text-white/80" fill="currentColor" viewBox="0 0 24 24">
          <path d="M3 15h18M3 19h18M3 11h18"/>
        </svg>
        <p class="text-sm font-semibold">68°</p>
      </div>
      <div class="bg-white/10 backdrop-blur rounded-xl p-3 text-center">
        <p class="text-xs text-white/60">Thu</p>
        <svg class="w-6 h-6 mx-auto my-2 text-white/80" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 16l-4-4 4-4m8 8l4-4-4-4M3 16l-1 4m18-20l-1 4"/>
        </svg>
        <p class="text-sm font-semibold">64°</p>
      </div>
      <div class="bg-white/10 backdrop-blur rounded-xl p-3 text-center">
        <p class="text-xs text-white/60">Fri</p>
        <svg class="w-6 h-6 mx-auto my-2 text-white/80" fill="currentColor" viewBox="0 0 24 24">
          <path d="M3 15h18M3 19h18M3 11h18"/>
        </svg>
        <p class="text-sm font-semibold">71°</p>
      </div>
    </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
37

# Weather Card

Weather summary card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Temperature emphasis
- Condition icon / label
- Optional forecast row

## Usage

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

Copy from `code.html`.

## Customization

- Icon treatment, typography, colors

## Accessibility

- Text alternatives for condition icons

## Dependencies

- Tailwind CSS only

## File Structure

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