下面是可直接复制运行的 HTML + Tailwind 示例，包含 6 张不同天气风格的卡片。可按需替换城市名、温度与指标即可使用。
UI图展示如下：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>天气卡片 UI - Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 text-slate-800 antialiased">
<main class="max-w-7xl mx-auto p-6">
<h1 class="text-2xl font-semibold mb-6">天气卡片</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Sunny -->
<article class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-amber-300 to-orange-500 text-white p-5 shadow-lg">
<div class="flex items-start justify-between">
<div>
<p class="text-xs uppercase tracking-wider/relaxed opacity-90">Sunny</p>
<h2 class="text-xl font-semibold">北京</h2>
</div>
<div class="w-16 h-16">
<svg viewBox="0 0 64 64" class="w-full h-full" fill="none" stroke="currentColor" stroke-width="3">
<circle cx="32" cy="32" r="12" fill="currentColor" stroke="none"></circle>
<g stroke-linecap="round">
<line x1="32" y1="4" x2="32" y2="14"></line>
<line x1="32" y1="50" x2="32" y2="60"></line>
<line x1="4" y1="32" x2="14" y2="32"></line>
<line x1="50" y1="32" x2="60" y2="32"></line>
<line x1="12" y1="12" x2="19" y2="19"></line>
<line x1="45" y1="45" x2="52" y2="52"></line>
<line x1="12" y1="52" x2="19" y2="45"></line>
<line x1="45" y1="19" x2="52" y2="12"></line>
</g>
</svg>
</div>
</div>
<div class="mt-6 flex items-end gap-6">
<div class="text-6xl font-bold leading-none">31°</div>
<div class="space-y-1 text-sm/5 opacity-95">
<p>体感 33°</p>
<p>最高 34° / 最低 22°</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3 text-sm">
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" class="opacity-90"><path d="M3 12h18M4 16h10M6 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>12 km/h</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" class="opacity-90"><path d="M12 3v18M7 8l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>0%</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" class="opacity-90"><path d="M12 2s-5 6-5 9a5 5 0 1 0 10 0c0-3-5-9-5-9z" stroke="currentColor" stroke-width="2"/></svg>
<span>45%</span>
</div>
</div>
</article>
<!-- Cloudy -->
<article class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-400 to-slate-700 text-white p-5 shadow-lg">
<div class="flex items-start justify-between">
<div>
<p class="text-xs uppercase tracking-wider/relaxed opacity-90">Cloudy</p>
<h2 class="text-xl font-semibold">上海</h2>
</div>
<div class="w-16 h-16">
<svg viewBox="0 0 64 64" class="w-full h-full" fill="none" stroke="currentColor" stroke-width="3">
<path d="M22 42h26a10 10 0 0 0 0-20 15 15 0 0 0-29-2A12 12 0 1 0 22 42z" fill="currentColor" stroke="none"/>
</svg>
</div>
</div>
<div class="mt-6 flex items-end gap-6">
<div class="text-6xl font-bold leading-none">26°</div>
<div class="space-y-1 text-sm/5 opacity-95">
<p>体感 27°</p>
<p>最高 28° / 最低 21°</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3 text-sm">
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 12h18M4 16h10M6 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>9 km/h</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3v18M7 8l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>10%</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2s-5 6-5 9a5 5 0 1 0 10 0c0-3-5-9-5-9z" stroke="currentColor" stroke-width="2"/></svg>
<span>60%</span>
</div>
</div>
</article>
<!-- Rain -->
<article class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-sky-500 to-indigo-700 text-white p-5 shadow-lg">
<div class="flex items-start justify-between">
<div>
<p class="text-xs uppercase tracking-wider/relaxed opacity-90">Rain</p>
<h2 class="text-xl font-semibold">广州</h2>
</div>
<div class="w-16 h-16">
<svg viewBox="0 0 64 64" class="w-full h-full" fill="none" stroke="currentColor" stroke-width="3">
<path d="M22 36h26a10 10 0 0 0 0-20 15 15 0 0 0-29-2A12 12 0 1 0 22 36z" fill="currentColor" stroke="none"/>
<g stroke-linecap="round">
<line x1="22" y1="44" x2="18" y2="54"/>
<line x1="32" y1="44" x2="28" y2="54"/>
<line x1="42" y1="44" x2="38" y2="54"/>
</g>
</svg>
</div>
</div>
<div class="mt-6 flex items-end gap-6">
<div class="text-6xl font-bold leading-none">23°</div>
<div class="space-y-1 text-sm/5 opacity-95">
<p>体感 24°</p>
<p>最高 25° / 最低 20°</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3 text-sm">
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 12h18M4 16h10M6 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>16 km/h</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3v18M7 8l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>90%</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2s-5 6-5 9a5 5 0 1 0 10 0c0-3-5-9-5-9z" stroke="currentColor" stroke-width="2"/></svg>
<span>88%</span>
</div>
</div>
</article>
<!-- Thunderstorm -->
<article class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-purple-700 to-gray-900 text-white p-5 shadow-lg">
<div class="flex items-start justify-between">
<div>
<p class="text-xs uppercase tracking-wider/relaxed opacity-90">Storm</p>
<h2 class="text-xl font-semibold">深圳</h2>
</div>
<div class="w-16 h-16">
<svg viewBox="0 0 64 64" class="w-full h-full" fill="none" stroke="currentColor" stroke-width="3">
<path d="M22 36h26a10 10 0 0 0 0-20 15 15 0 0 0-29-2A12 12 0 1 0 22 36z" fill="currentColor" stroke="none"/>
<path d="M30 38l-6 12h6l-2 10 10-16h-6l4-6h-6z" fill="currentColor" stroke="none"/>
</svg>
</div>
</div>
<div class="mt-6 flex items-end gap-6">
<div class="text-6xl font-bold leading-none">24°</div>
<div class="space-y-1 text-sm/5 opacity-95">
<p>体感 25°</p>
<p>最高 26° / 最低 22°</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3 text-sm">
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 12h18M4 16h10M6 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>22 km/h</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3v18M7 8l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>80%</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2s-5 6-5 9a5 5 0 1 0 10 0c0-3-5-9-5-9z" stroke="currentColor" stroke-width="2"/></svg>
<span>82%</span>
</div>
</div>
</article>
<!-- Snow -->
<article class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-cyan-300 to-blue-600 text-white p-5 shadow-lg">
<div class="flex items-start justify-between">
<div>
<p class="text-xs uppercase tracking-wider/relaxed opacity-90">Snow</p>
<h2 class="text-xl font-semibold">哈尔滨</h2>
</div>
<div class="w-16 h-16">
<svg viewBox="0 0 64 64" class="w-full h-full" fill="none" stroke="currentColor" stroke-width="3">
<path d="M22 36h26a10 10 0 0 0 0-20 15 15 0 0 0-29-2A12 12 0 1 0 22 36z" fill="currentColor" stroke="none"/>
<g stroke-linecap="round">
<path d="M22 44l3 3m7-3l-3 3m-7 3l3-3m7 3l-3-3" />
<path d="M32 42v12" />
<path d="M26 48h12" />
</g>
</svg>
</div>
</div>
<div class="mt-6 flex items-end gap-6">
<div class="text-6xl font-bold leading-none">-5°</div>
<div class="space-y-1 text-sm/5 opacity-95">
<p>体感 -9°</p>
<p>最高 -2° / 最低 -12°</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3 text-sm">
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 12h18M4 16h10M6 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>14 km/h</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3v18M7 8l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>60%</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2s-5 6-5 9a5 5 0 1 0 10 0c0-3-5-9-5-9z" stroke="currentColor" stroke-width="2"/></svg>
<span>72%</span>
</div>
</div>
</article>
<!-- Fog -->
<article class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-zinc-300 to-zinc-500 text-zinc-900 p-5 shadow-lg">
<div class="flex items-start justify-between">
<div>
<p class="text-xs uppercase tracking-wider/relaxed opacity-90">Fog</p>
<h2 class="text-xl font-semibold">成都</h2>
</div>
<div class="w-16 h-16">
<svg viewBox="0 0 64 64" class="w-full h-full" fill="none" stroke="currentColor" stroke-width="3">
<path d="M16 28h32M12 36h40M18 44h28" stroke-linecap="round"/>
<path d="M22 24h26a10 10 0 0 0 0-20 15 15 0 0 0-29-2A12 12 0 1 0 22 24z" opacity=".15" fill="currentColor" stroke="none"/>
</svg>
</div>
</div>
<div class="mt-6 flex items-end gap-6">
<div class="text-6xl font-bold leading-none">19°</div>
<div class="space-y-1 text-sm/5 opacity-90">
<p>体感 19°</p>
<p>最高 21° / 最低 17°</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3 text-sm">
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 12h18M4 16h10M6 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>6 km/h</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3v18M7 8l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>20%</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2s-5 6-5 9a5 5 0 1 0 10 0c0-3-5-9-5-9z" stroke="currentColor" stroke-width="2"/></svg>
<span>92%</span>
</div>
</div>
</article>
<!-- Clear Night -->
<article class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-800 to-slate-900 text-white p-5 shadow-lg">
<div class="flex items-start justify-between">
<div>
<p class="text-xs uppercase tracking-wider/relaxed opacity-90">Clear Night</p>
<h2 class="text-xl font-semibold">西安</h2>
</div>
<div class="w-16 h-16">
<svg viewBox="0 0 64 64" class="w-full h-full" fill="none" stroke="currentColor" stroke-width="3">
<path d="M40 10a18 18 0 1 0 14 30A18 18 0 1 1 40 10z" fill="currentColor" stroke="none"/>
<g stroke-linecap="round">
<circle cx="14" cy="18" r="1.8" fill="currentColor" stroke="none"/>
<circle cx="50" cy="14" r="1.8" fill="currentColor" stroke="none"/>
<circle cx="20" cy="52" r="1.8" fill="currentColor" stroke="none"/>
</g>
</svg>
</div>
</div>
<div class="mt-6 flex items-end gap-6">
<div class="text-6xl font-bold leading-none">18°</div>
<div class="space-y-1 text-sm/5 opacity-95">
<p>体感 18°</p>
<p>最高 23° / 最低 15°</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3 text-sm">
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 12h18M4 16h10M6 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>8 km/h</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3v18M7 8l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span>0%</span>
</div>
<div class="flex items-center gap-2">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2s-5 6-5 9a5 5 0 1 0 10 0c0-3-5-9-5-9z" stroke="currentColor" stroke-width="2"/></svg>
<span>50%</span>
</div>
</div>
</article>
</div>
</main>
</body>
</html>