1<div
2  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]"
3>
4  <h3 class="text-xl text-center">Today</h3>
5  <div class="gap-4 relative">
6    <svg
7      viewBox="0 0 64 64"
8      xmlns:xlink="http://www.w3.org/1999/xlink"
9      xmlns="http://www.w3.org/2000/svg"
10      class="w-20 scale-[110%]"
11    >
12      <defs>
13        <linearGradient
14          gradientUnits="userSpaceOnUse"
15          y2="28.33"
16          y1="19.67"
17          x2="21.5"
18          x1="16.5"
19          id="b"
20        >
21          <stop stop-color="#fbbf24" offset="0"></stop>
22          <stop stop-color="#fbbf24" offset=".45"></stop>
23          <stop stop-color="#f59e0b" offset="1"></stop>
24        </linearGradient>
25        <linearGradient
26          gradientUnits="userSpaceOnUse"
27          y2="50.8"
28          y1="21.96"
29          x2="39.2"
30          x1="22.56"
31          id="c"
32        >
33          <stop stop-color="#f3f7fe" offset="0"></stop>
34          <stop stop-color="#f3f7fe" offset=".45"></stop>
35          <stop stop-color="#deeafb" offset="1"></stop>
36        </linearGradient>
37        <linearGradient
38          gradientUnits="userSpaceOnUse"
39          y2="48.05"
40          y1="42.95"
41          x2="25.47"
42          x1="22.53"
43          id="a"
44        >
45          <stop stop-color="#4286ee" offset="0"></stop>
46          <stop stop-color="#4286ee" offset=".45"></stop>
47          <stop stop-color="#0950bc" offset="1"></stop>
48        </linearGradient>
49        <linearGradient
50          xlink:href="#a"
51          y2="48.05"
52          y1="42.95"
53          x2="32.47"
54          x1="29.53"
55          id="d"
56        ></linearGradient>
57        <linearGradient
58          xlink:href="#a"
59          y2="48.05"
60          y1="42.95"
61          x2="39.47"
62          x1="36.53"
63          id="e"
64        ></linearGradient>
65      </defs>
66      <circle
67        stroke-width=".5"
68        stroke-miterlimit="10"
69        stroke="#f8af18"
70        fill="url(#b)"
71        r="5"
72        cy="24"
73        cx="19"
74      ></circle>
75      <path
76        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"
77        stroke-width="2"
78        stroke-miterlimit="10"
79        stroke-linecap="round"
80        stroke="#fbbf24"
81        fill="none"
82      >
83        <animateTransform
84          values="0 19 24; 360 19 24"
85          type="rotate"
86          repeatCount="indefinite"
87          dur="45s"
88          attributeName="transform"
89        ></animateTransform>
90      </path>
91      <path
92        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"
93        stroke-width=".5"
94        stroke-miterlimit="10"
95        stroke="#e6effc"
96        fill="url(#c)"
97      ></path>
98      <path
99        d="M24.39 43.03l-.78 4.94"
100        stroke-width="2"
101        stroke-miterlimit="10"
102        stroke-linecap="round"
103        stroke="url(#a)"
104        fill="none"
105      >
106        <animateTransform
107          values="1 -5; -2 10"
108          type="translate"
109          repeatCount="indefinite"
110          dur="0.7s"
111          attributeName="transform"
112        ></animateTransform>
113      </path>
114      <path
115        d="M31.39 43.03l-.78 4.94"
116        stroke-width="2"
117        stroke-miterlimit="10"
118        stroke-linecap="round"
119        stroke="url(#d)"
120        fill="none"
121      >
122        <animateTransform
123          values="1 -5; -2 10"
124          type="translate"
125          repeatCount="indefinite"
126          dur="0.7s"
127          begin="-0.4s"
128          attributeName="transform"
129        ></animateTransform>
130      </path>
131      <path
132        d="M38.39 43.03l-.78 4.94"
133        stroke-width="2"
134        stroke-miterlimit="10"
135        stroke-linecap="round"
136        stroke="url(#e)"
137        fill="none"
138      >
139        <animateTransform
140          values="1 -5; -2 10"
141          type="translate"
142          repeatCount="indefinite"
143          dur="0.7s"
144          begin="-0.2s"
145          attributeName="transform"
146        ></animateTransform>
147      </path>
148    </svg>
149    <h4
150      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"
151    >
152      6°
153    </h4>
154  </div>
155  <div class="absolute duration-300 -left-32 mt-2 group-hover:left-10">
156    <p class="text-sm">light rain</p>
157    <p class="text-sm">50% humidity</p>
158  </div>
159</div>
160