Weather Card

<!--
  Day 112: Weather card

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Weather Card -->
<div class="relative mx-auto w-full max-w-sm">
  <div
    class="absolute inset-0 -m-2.5 rounded-3xl border border-white/90 bg-white/50 shadow-lg shadow-secondary-200/50 backdrop-blur-xs dark:border-white/10 dark:bg-white/5 dark:shadow-black/10"
  ></div>
  <div
    class="relative overflow-hidden rounded-2xl bg-linear-to-br from-sky-500 to-indigo-600 p-6 text-white shadow-md shadow-sky-500/20"
  >
    <!-- Location & Date -->
    <div class="flex items-start justify-between">
      <div>
        <h3 class="text-lg font-semibold">San Francisco</h3>
        <p class="text-sm text-sky-100">Tuesday, Apr 1</p>
      </div>
      <button
        type="button"
        class="flex size-9 items-center justify-center rounded-full bg-white/15 backdrop-blur-sm hover:bg-white/25 active:bg-white/10"
        aria-label="Search location"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-map-pin inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="m7.539 14.841.003.003.002.002a.755.755 0 0 0 .912 0l.002-.002.003-.003.012-.009a5.57 5.57 0 0 0 .19-.153 15.588 15.588 0 0 0 2.046-2.082c1.101-1.362 2.291-3.342 2.291-5.597A5 5 0 0 0 3 7c0 2.255 1.19 4.235 2.292 5.597a15.591 15.591 0 0 0 2.046 2.082 8.916 8.916 0 0 0 .189.153l.012.01ZM8 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    </div>
    <!-- END Location & Date -->

    <!-- Current Weather -->
    <div class="mt-6 flex items-center justify-between">
      <div>
        <div class="text-6xl font-bold tracking-tight">18°</div>
        <p class="mt-1 text-sm font-medium text-sky-100">Partly Cloudy</p>
      </div>
      <div class="flex-none">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-cloud inline-block size-20 text-white"
        >
          <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
        </svg>
      </div>
    </div>
    <!-- END Current Weather -->

    <!-- Weather Details -->
    <div class="mt-6 grid grid-cols-3 gap-3">
      <div
        class="rounded-xl bg-white/15 px-3 py-2.5 text-center backdrop-blur-sm"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-droplets inline-block size-6 text-sky-200"
        >
          <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
            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"
          />
        </svg>
        <p class="mt-2 text-xs text-sky-200">Humidity</p>
        <p class="text-sm font-semibold">72%</p>
      </div>
      <div
        class="rounded-xl bg-white/15 px-3 py-2.5 text-center backdrop-blur-sm"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-wind inline-block size-6 text-sky-200"
        >
          <path d="M12.8 19.6A2 2 0 1 0 14 16H2" />
          <path d="M17.5 8a2.5 2.5 0 1 1 2 4H2" />
          <path d="M9.8 4.4A2 2 0 1 1 11 8H2" />
        </svg>
        <p class="mt-2 text-xs text-sky-200">Wind</p>
        <p class="text-sm font-semibold">14 km/h</p>
      </div>
      <div
        class="rounded-xl bg-white/15 px-3 py-2.5 text-center backdrop-blur-sm"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-eye inline-block size-6 text-sky-200"
        >
          <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"
          />
          <circle cx="12" cy="12" r="3" />
        </svg>
        <p class="mt-2 text-xs text-sky-200">Visibility</p>
        <p class="text-sm font-semibold">10 km</p>
      </div>
    </div>
    <!-- END Weather Details -->

    <!-- Forecast -->
    <div class="mt-5 rounded-2xl bg-white/10 p-4 backdrop-blur-sm">
      <h4
        class="mb-3 text-xs font-semibold tracking-wide text-sky-200 uppercase"
      >
        5-Day Forecast
      </h4>
      <div class="grid grid-cols-5 gap-2 text-center">
        <!-- Day -->
        <div>
          <p class="text-xs font-medium text-sky-200">Wed</p>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-sun my-1.5 inline-block size-6"
          >
            <circle cx="12" cy="12" r="4" />
            <path d="M12 2v2" />
            <path d="M12 20v2" />
            <path d="m4.93 4.93 1.41 1.41" />
            <path d="m17.66 17.66 1.41 1.41" />
            <path d="M2 12h2" />
            <path d="M20 12h2" />
            <path d="m6.34 17.66-1.41 1.41" />
            <path d="m19.07 4.93-1.41 1.41" />
          </svg>
          <p class="text-sm font-semibold">22°</p>
        </div>
        <!-- END Day -->

        <!-- Day -->
        <div>
          <p class="text-xs font-medium text-sky-200">Thu</p>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-cloudy my-1.5 inline-block size-6"
          >
            <path d="M17.5 21H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
            <path d="M22 10a3 3 0 0 0-3-3h-2.207a5.502 5.502 0 0 0-10.702.5" />
          </svg>
          <p class="text-sm font-semibold">17°</p>
        </div>
        <!-- END Day -->

        <!-- Day -->
        <div>
          <p class="text-xs font-medium text-sky-200">Fri</p>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-cloudy my-1.5 inline-block size-6"
          >
            <path d="M17.5 21H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
            <path d="M22 10a3 3 0 0 0-3-3h-2.207a5.502 5.502 0 0 0-10.702.5" />
          </svg>
          <p class="text-sm font-semibold">15°</p>
        </div>
        <!-- END Day -->

        <!-- Day -->
        <div>
          <p class="text-xs font-medium text-sky-200">Sat</p>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-sun my-1.5 inline-block size-6"
          >
            <circle cx="12" cy="12" r="4" />
            <path d="M12 2v2" />
            <path d="M12 20v2" />
            <path d="m4.93 4.93 1.41 1.41" />
            <path d="m17.66 17.66 1.41 1.41" />
            <path d="M2 12h2" />
            <path d="M20 12h2" />
            <path d="m6.34 17.66-1.41 1.41" />
            <path d="m19.07 4.93-1.41 1.41" />
          </svg>
          <p class="text-sm font-semibold">24°</p>
        </div>
        <!-- END Day -->

        <!-- Day -->
        <div>
          <p class="text-xs font-medium text-sky-200">Sun</p>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-sun my-1.5 inline-block size-6"
          >
            <circle cx="12" cy="12" r="4" />
            <path d="M12 2v2" />
            <path d="M12 20v2" />
            <path d="m4.93 4.93 1.41 1.41" />
            <path d="m17.66 17.66 1.41 1.41" />
            <path d="M2 12h2" />
            <path d="M20 12h2" />
            <path d="m6.34 17.66-1.41 1.41" />
            <path d="m19.07 4.93-1.41 1.41" />
          </svg>
          <p class="text-sm font-semibold">21°</p>
        </div>
        <!-- END Day -->
      </div>
    </div>
    <!-- END Forecast -->
  </div>
</div>
<!-- END Weather Card -->