Weather Information Card

<div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl overflow-hidden border border-gray-700/50 relative w-[400px]">
  <img src="https://images.unsplash.com/photo-1608503170720-1c02fac33341?w=1080&q=80" alt="Weather Background" class="absolute inset-0 w-full h-full opacity-30 object-cover">
  <div class="relative pt-6 pr-6 pb-6 pl-6">
    <div class="flex justify-between items-start mb-4">
      <div class="">
        <p class="text-sm font-medium text-gray-300">Current Location</p>
        <p class="text-lg font-semibold text-white">San Francisco, CA</p>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-yellow-400">
        <path d="M12 2v2"></path>
        <path d="m4.93 4.93 1.41 1.41"></path>
        <path d="M20 12h2"></path>
        <path d="m19.07 4.93-1.41 1.41"></path>
        <path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"></path>
        <path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"></path>
      </svg>
    </div>
    <div class="flex items-end space-x-4 mb-6">
      <span class="text-6xl font-medium tracking-tight text-white">18°</span>
      <div class="pb-2">
        <p class="text-gray-300 font-medium">Partly Cloudy</p>
        <p class="text-sm text-gray-400">Feels like 20°</p>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-4 text-sm mb-6">
      <div class="flex items-center space-x-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-blue-400">
          <path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"></path>
          <path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"></path>
        </svg>
        <span class="text-gray-300">Humidity 68%</span>
      </div>
      <div class="flex items-center space-x-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-cyan-400">
          <path d="M12.8 19.6A2 2 0 1 0 14 16H2"></path>
          <path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"></path>
          <path d="M9.8 4.4A2 2 0 1 1 11 8H2"></path>
        </svg>
        <span class="text-gray-300">Wind 12 km/h</span>
      </div>
      <div class="flex items-center space-x-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-purple-400">
          <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
        <span class="text-gray-300">Visibility 15 km</span>
      </div>
      <div class="flex items-center space-x-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-orange-400">
          <path d="m12 14 4-4"></path>
          <path d="M3.34 19a10 10 0 1 1 17.32 0"></path>
        </svg>
        <span class="text-gray-300">1013 hPa</span>
      </div>
    </div>
    <div class="space-y-3">
      <h4 class="text-sm font-medium text-gray-300">5-Day Forecast</h4>
      <div class="grid grid-cols-5 gap-2 text-center text-xs">
        <div class="bg-gray-800/50 rounded-lg p-2 border border-gray-700/30">
          <p class="text-gray-400 mb-1">Wed</p>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-yellow-400 mx-auto mb-1">
            <circle cx="12" cy="12" r="4"></circle>
            <path d="M12 2v2"></path>
            <path d="M12 20v2"></path>
            <path d="m4.93 4.93 1.41 1.41"></path>
            <path d="m17.66 17.66 1.41 1.41"></path>
            <path d="M2 12h2"></path>
            <path d="M20 12h2"></path>
            <path d="m6.34 17.66-1.41 1.41"></path>
            <path d="m19.07 4.93-1.41 1.41"></path>
          </svg>
          <p class="font-semibold text-white">22°</p>
        </div>
        <div class="bg-gray-800/50 rounded-lg p-2 border border-gray-700/30">
          <p class="text-gray-400 mb-1">Thu</p>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-blue-400 mx-auto mb-1">
            <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path>
            <path d="M16 14v6"></path>
            <path d="M8 14v6"></path>
            <path d="M12 16v6"></path>
          </svg>
          <p class="font-semibold text-white">16°</p>
        </div>
        <div class="bg-gray-800/50 rounded-lg p-2 border border-gray-700/30">
          <p class="text-gray-400 mb-1">Fri</p>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-gray-400 mx-auto mb-1">
            <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path>
          </svg>
          <p class="font-semibold text-white">19°</p>
        </div>
        <div class="bg-gray-800/50 rounded-lg p-2 border border-gray-700/30">
          <p class="text-gray-400 mb-1">Sat</p>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-yellow-400 mx-auto mb-1">
            <circle cx="12" cy="12" r="4"></circle>
            <path d="M12 2v2"></path>
            <path d="M12 20v2"></path>
            <path d="m4.93 4.93 1.41 1.41"></path>
            <path d="m17.66 17.66 1.41 1.41"></path>
            <path d="M2 12h2"></path>
            <path d="M20 12h2"></path>
            <path d="m6.34 17.66-1.41 1.41"></path>
            <path d="m19.07 4.93-1.41 1.41"></path>
          </svg>
          <p class="font-semibold text-white">24°</p>
        </div>
        <div class="bg-gray-800/50 rounded-lg p-2 border border-gray-700/30">
          <p class="text-gray-400 mb-1">Sun</p>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-yellow-400 mx-auto mb-1">
            <path d="M12 2v2"></path>
            <path d="m4.93 4.93 1.41 1.41"></path>
            <path d="M20 12h2"></path>
            <path d="m19.07 4.93-1.41 1.41"></path>
            <path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"></path>
            <path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"></path>
          </svg>
          <p class="font-semibold text-white">21°</p>
        </div>
      </div>
    </div>
    <div class="mt-4 bg-gray-800/30 rounded-xl p-3">
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm text-gray-300">Air Quality</span>
        <span class="text-green-400 text-sm font-medium">Good</span>
      </div>
      <div class="flex items-center space-x-2">
        <div class="flex-1 h-1 bg-gray-700 rounded-full overflow-hidden">
          <div class="h-1 bg-gradient-to-r from-green-400 to-yellow-400 rounded-full" style="width:35%"></div>
        </div>
        <span class="text-xs text-gray-400">AQI 42</span>
      </div>
    </div>
  </div>
</div>