<div
  class="duration-300 font-mono text-white group cursor-pointer relative overflow-hidden bg-[#DCDFE4] w-28 h-48 dark:bg-[#22272B] rounded-3xl p-4 hover:w-56 hover:bg-blue-200 hover:dark:bg-[#0C66E4]"
>
  <h3 class="text-xl text-center">Today</h3>
  <div class="gap-4 relative">
    <svg
      viewBox="0 0 64 64"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      class="w-20 scale-[110%]"
    >
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="28.33"
          y1="19.67"
          x2="21.5"
          x1="16.5"
          id="b"
        >
          <stop stop-color="#fbbf24" offset="0"></stop>
          <stop stop-color="#fbbf24" offset=".45"></stop>
          <stop stop-color="#f59e0b" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="50.8"
          y1="21.96"
          x2="39.2"
          x1="22.56"
          id="c"
        >
          <stop stop-color="#f3f7fe" offset="0"></stop>
          <stop stop-color="#f3f7fe" offset=".45"></stop>
          <stop stop-color="#deeafb" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="48.05"
          y1="42.95"
          x2="25.47"
          x1="22.53"
          id="a"
        >
          <stop stop-color="#4286ee" offset="0"></stop>
          <stop stop-color="#4286ee" offset=".45"></stop>
          <stop stop-color="#0950bc" offset="1"></stop>
        </linearGradient>
        <linearGradient
          xlink:href="#a"
          y2="48.05"
          y1="42.95"
          x2="32.47"
          x1="29.53"
          id="d"
        ></linearGradient>
        <linearGradient
          xlink:href="#a"
          y2="48.05"
          y1="42.95"
          x2="39.47"
          x1="36.53"
          id="e"
        ></linearGradient>
      </defs>
      <circle
        stroke-width=".5"
        stroke-miterlimit="10"
        stroke="#f8af18"
        fill="url(#b)"
        r="5"
        cy="24"
        cx="19"
      ></circle>
      <path
        d="M19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="#fbbf24"
        fill="none"
      >
        <animateTransform
          values="0 19 24; 360 19 24"
          type="rotate"
          repeatCount="indefinite"
          dur="45s"
          attributeName="transform"
        ></animateTransform>
      </path>
      <path
        d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"
        stroke-width=".5"
        stroke-miterlimit="10"
        stroke="#e6effc"
        fill="url(#c)"
      ></path>
      <path
        d="M24.39 43.03l-.78 4.94"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="url(#a)"
        fill="none"
      >
        <animateTransform
          values="1 -5; -2 10"
          type="translate"
          repeatCount="indefinite"
          dur="0.7s"
          attributeName="transform"
        ></animateTransform>
      </path>
      <path
        d="M31.39 43.03l-.78 4.94"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="url(#d)"
        fill="none"
      >
        <animateTransform
          values="1 -5; -2 10"
          type="translate"
          repeatCount="indefinite"
          dur="0.7s"
          begin="-0.4s"
          attributeName="transform"
        ></animateTransform>
      </path>
      <path
        d="M38.39 43.03l-.78 4.94"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="url(#e)"
        fill="none"
      >
        <animateTransform
          values="1 -5; -2 10"
          type="translate"
          repeatCount="indefinite"
          dur="0.7s"
          begin="-0.2s"
          attributeName="translate-x-8"
        ></animateTransform>
      </path>
    </svg>
    <h4
      class="font-sans duration-300 absolute left-1/2 -translate-x-1/2 text-5xl text-center group-hover:translate-x-8 group-hover:-translate-y-16 group-hover:scale-150"
    >
      6°
    </h4>
  </div>
  <div class="absolute duration-300 -left-32 mt-2 group-hover:left-10">
    <p class="text-sm">Heavy Raining</p>
    <p class="text-sm">50% humidity</p>
  </div>
</div>