<div class="weather-card">
<div class="weather-header">
<h3>San Francisco</h3>
<span>Mon, 12:30 PM</span>
</div>
<div class="weather-body">
<svg class="w-icon" viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path></svg>
<div class="temp">72°</div>
<div class="condition">Sunny</div>
</div>
<div class="weather-details">
<div class="detail">
<span>Wind</span>
<strong>8 mph</strong>
</div>
<div class="detail">
<span>Humidity</span>
<strong>34%</strong>
</div>
<div class="detail">
<span>Feels Like</span>
<strong>74°</strong>
</div>
</div>
</div>
Back to Snippets
Weather Card Widget CSS
Display the forecast with this beautiful weather widget. It features a large temperature display, icon, and additional details like humidity and wind speed, all styled with a modern gradient background.
395