Animated Weather Rain Widget Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="weather-card-514"><div class="weather-info"><div class="temp">24°</div><div class="details"><p class="highlow">H:32° L: 16°</p><p class="location">Kathmandu, Nepal</p></div></div><div class="weather-graphic"><div class="cloud"></div><div class="rain-container"><span class="drop d1"></span><span class="drop d2"></span><span class="drop d3"></span></div><div class="condition">Mid Rain</div></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.weather-card-514 { width: 280px; background: linear-gradient(135deg, #4338ca, #312e81); border-radius: 24px; padding: 20px; color: #fff; font-family: system-ui, sans-serif; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 15px 30px rgba(67, 56, 202, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; margin: auto; }
.weather-card-514:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 40px rgba(67, 56, 202, 0.45); }
.weather-card-514 .temp { font-size: 38px; font-weight: 800; line-height: 1; }
.weather-card-514 .details { margin-top: 14px; }
.weather-card-514 p { margin: 0; font-size: 11px; opacity: 0.8; }
.weather-card-514 .location { font-size: 12px; font-weight: 600; opacity: 1; margin-top: 2px; }
.weather-card-514 .weather-graphic { text-align: center; position: relative; }
.weather-card-514 .cloud { width: 45px; height: 18px; background: #e0e7ff; border-radius: 20px; position: relative; margin: 0 auto 12px; }
.weather-card-514 .cloud::before { content: ""; position: absolute; width: 22px; height: 22px; background: #e0e7ff; border-radius: 50%; top: -10px; left: 6px; }
.weather-card-514 .rain-container { display: flex; gap: 6px; justify-content: center; position: absolute; top: 18px; left: 0; right: 0; }
.weather-card-514 .drop { width: 2px; height: 8px; background: #93c5fd; border-radius: 2px; animation: rain-fall-514 0.8s infinite linear; }
.weather-card-514 .d2 { animation-delay: 0.25s; }
.weather-card-514 .d3 { animation-delay: 0.5s; }
@keyframes rain-fall-514 { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
.weather-card-514 .condition { font-size: 11px; font-weight: 600; opacity: 0.9; }