Card by Uncannypotato69

#212121

HTML +TailwindCSS

1<div
2  class="weather flex min-h-[10em] min-w-[16em] flex-col items-center justify-center gap-[0.5em] rounded-[1.5em] bg-[#FFDAE9] px-[1em] py-[0.5em] font-nunito text-[#F471A6] shadow-[0px_4px_16px_0px_#222]"
3>
4  <div class="flex h-fit w-full items-center justify-center gap-[1em]">
5    <svg
6      viewBox="0 0 80 80"
7      fill="none"
8      height="80"
9      width="80"
10      xmlns="http://www.w3.org/2000/svg"
11    >
12      <path
13        d="M77.39 46.522c0 1.478-.086 2.974-.26 4.435 0 .035-.017.035-.017.07L61.72 46.921c.018-.14.018-.261.018-.4 0-11.983-9.757-21.74-21.74-21.74-11.982 0-21.738 9.757-21.738 21.74v.33l-15.392 4.14v-.035a37.706 37.706 0 0 1-.26-4.435c0-20.609 16.765-37.392 37.39-37.392 20.627 0 37.392 16.783 37.392 37.392Z"
14        fill="#F95428"
15      ></path>
16      <path
17        d="M66.956 46.522c0 .452-.017.887-.034 1.322v.052L49.86 52.47a2.32 2.32 0 0 1 .243-.887c.8-1.583 1.2-3.288 1.2-5.061 0-6.227-5.078-11.305-11.305-11.305-6.226 0-11.304 5.078-11.304 11.305 0 1.773.4 3.478 1.2 5.06a2.4 2.4 0 0 1 .261 1.079l-17.043-4.574a1.026 1.026 0 0 1-.035-.244 31.56 31.56 0 0 1-.035-1.321c0-14.87 12.087-26.957 26.956-26.957 14.87 0 26.957 12.087 26.957 26.957Z"
18        fill="#F5B420"
19      ></path>
20      <path
21        d="M77.391 46.522c0 1.478-.087 2.974-.26 4.435 0 .035-.018.035-.018.07l-15.391-4.105c.017-.14.017-.261.017-.4 0-11.983-9.756-21.74-21.739-21.74V9.13c20.626 0 37.391 16.783 37.391 37.392Z"
22        fill="#EA3B18"
23      ></path>
24      <path
25        d="M66.957 46.522c0 .452-.017.887-.035 1.322v.052L49.861 52.47c.017-.296.105-.61.244-.887.8-1.583 1.2-3.288 1.2-5.061 0-6.227-5.079-11.305-11.305-11.305V19.565c14.87 0 26.957 12.087 26.957 26.957Z"
26        fill="#F09C12"
27      ></path>
28      <path
29        d="M74.541 53.265a2.608 2.608 0 0 1-2.594-2.917c.15-1.262.227-2.549.227-3.826C72.174 28.78 57.74 14.348 40 14.348c-17.742 0-32.174 14.432-32.174 32.174 0 1.277.076 2.564.226 3.826a2.608 2.608 0 0 1-2.283 2.898c-1.401.175-2.726-.85-2.897-2.281a37.624 37.624 0 0 1-.264-4.443C2.608 25.904 19.381 9.13 40 9.13c20.618 0 37.39 16.774 37.39 37.392 0 1.482-.087 2.977-.262 4.443a2.609 2.609 0 0 1-2.587 2.3Z"
30        fill="#E6563A"
31      ></path>
32      <path
33        d="M72.174 46.522c0 1.277-.077 2.564-.226 3.826a2.608 2.608 0 1 0 5.18.617 37.64 37.64 0 0 0 .263-4.443C77.391 25.904 60.618 9.13 40 9.13v5.218c17.741 0 32.174 14.432 32.174 32.174Z"
34        fill="#D9472B"
35      ></path>
36      <path
37        d="m64.32 50.339-.124-.003a2.608 2.608 0 0 1-2.483-2.727c.017-.361.025-.723.025-1.088 0-11.987-9.752-21.739-21.739-21.739S18.26 34.534 18.26 46.522c0 .364.009.726.026 1.087a2.608 2.608 0 0 1-2.483 2.727c-1.473.051-2.662-1.046-2.728-2.485a29.3 29.3 0 0 1-.032-1.33c0-14.864 12.092-26.956 26.956-26.956 14.865 0 26.957 12.092 26.957 26.957 0 .446-.012.889-.032 1.33a2.608 2.608 0 0 1-2.604 2.487Z"
38        fill="#FFC033"
39      ></path>
40      <path
41        d="M61.739 46.522c0 .364-.009.726-.025 1.087a2.608 2.608 0 1 0 5.21.243c.02-.44.033-.884.033-1.33 0-14.864-12.093-26.957-26.957-26.957v5.218c11.987 0 21.739 9.752 21.739 21.739Z"
42        fill="#F9A926"
43      ></path>
44      <path
45        d="M52.44 55.357a2.608 2.608 0 0 1-2.329-3.781 11.157 11.157 0 0 0 1.194-5.054c0-6.233-5.072-11.305-11.305-11.305S28.696 40.29 28.696 46.522c0 1.777.402 3.477 1.194 5.053a2.608 2.608 0 1 1-4.66 2.344 16.317 16.317 0 0 1-1.752-7.397C23.479 37.412 30.89 30 40 30s16.522 7.412 16.522 16.522c0 2.6-.59 5.087-1.751 7.397a2.608 2.608 0 0 1-2.332 1.438Z"
46        fill="#3AACE6"
47      ></path>
48      <path
49        d="M51.304 46.522c0 1.777-.402 3.477-1.194 5.053a2.608 2.608 0 1 0 4.66 2.344 16.316 16.316 0 0 0 1.752-7.397C56.522 37.412 49.11 30 40 30v5.217c6.233 0 11.304 5.072 11.304 11.305Z"
50        fill="#2B9FD9"
51      ></path>
52      <path
53        d="m69.543 50.322-.102-.001a2.609 2.609 0 0 1-2.506-2.708 30.4 30.4 0 0 0 .022-1.091c0-14.864-12.092-26.957-26.957-26.957-14.864 0-26.956 12.092-26.956 26.957 0 .365.008.73.022 1.09a2.61 2.61 0 0 1-2.507 2.709 2.6 2.6 0 0 1-2.707-2.506 32.62 32.62 0 0 1-.026-1.293C7.826 28.78 22.26 14.348 40 14.348S72.174 28.78 72.174 46.522c0 .433-.009.863-.026 1.293a2.609 2.609 0 0 1-2.605 2.508Z"
54        fill="#FF9F19"
55      ></path>
56      <path
57        d="M66.957 46.522c0 .365-.009.73-.022 1.091a2.61 2.61 0 0 0 5.213.202c.017-.43.026-.86.026-1.293C72.174 28.78 57.74 14.348 40 14.348v5.217c14.864 0 26.957 12.093 26.957 26.957Z"
58        fill="#F28618"
59      ></path>
60      <path
61        d="M57.765 56.23a2.609 2.609 0 0 1-2.42-3.581 16.371 16.371 0 0 0 1.177-6.127C56.522 37.412 49.11 30 40 30s-16.522 7.412-16.522 16.522c0 2.119.396 4.18 1.177 6.127a2.609 2.609 0 0 1-1.449 3.392 2.612 2.612 0 0 1-3.391-1.45 21.559 21.559 0 0 1-1.554-8.07c0-11.986 9.752-21.738 21.739-21.738s21.739 9.752 21.739 21.739c0 2.787-.523 5.503-1.554 8.07a2.607 2.607 0 0 1-2.42 1.638Z"
62        fill="#88CC2A"
63      ></path>
64      <path
65        d="M56.522 46.522c0 2.119-.396 4.18-1.177 6.127a2.609 2.609 0 0 0 4.84 1.943 21.559 21.559 0 0 0 1.554-8.07c0-11.987-9.752-21.74-21.739-21.74V30c9.11 0 16.522 7.412 16.522 16.522Z"
66        fill="#7FB335"
67      ></path>
68      <path
69        d="M66.957 44.782c-4.253 0-8.207 2.105-10.623 5.516-6.448-1.604-12.856 3.352-12.856 10.137 0 5.754 4.681 10.434 10.435 10.434h13.044C74.149 70.87 80 65.02 80 57.827c0-7.192-5.85-13.044-13.043-13.044Z"
70        fill="#DAE1E6"
71      ></path>
72      <path
73        d="M23.667 50.298c-2.417-3.411-6.37-5.516-10.624-5.516C5.851 44.782 0 50.633 0 57.826c0 7.192 5.85 13.043 13.043 13.043h13.044c5.754 0 10.435-4.68 10.435-10.434 0-6.774-6.397-11.744-12.855-10.137Z"
74        fill="#EDF0F2"
75      ></path>
76    </svg>
77    <span
78      class="h-[4em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
79    ></span>
80    <div class="flex flex-col items-start justify-center">
81      <p class="text-[0.75rem] font-light">Seasoning City, Dishland</p>
82      <p class="text-[1.5em] font-semibold">28°C</p>
83      <div class="flex items-center justify-center gap-[0.125em]">
84        <svg
85          viewBox="0 0 16 17"
86          fill="none"
87          height="17"
88          width="16"
89          xmlns="http://www.w3.org/2000/svg"
90        >
91          <path
92            d="M8 14.26A5.92 5.92 0 1 0 8 2.42a5.92 5.92 0 0 0 0 11.84Z"
93            stroke-linejoin="round"
94            stroke-linecap="round"
95            stroke="#F471A6"
96          ></path>
97          <path
98            d="M8.595 5.716A.589.589 0 0 1 8 6.292a.576.576 0 1 1 .595-.576Zm-1.05 5.363V7.636a.448.448 0 0 1 .629-.425.441.441 0 0 1 .268.425v3.443a.449.449 0 0 1-.896 0Z"
99            fill="#F471A6"
100          ></path>
101        </svg>
102        <p class="text-[0.625rem] font-light">Don’t miss out the Rainbow</p>
103      </div>
104    </div>
105  </div>
106  <div class="h-[0.5px] w-full rounded-full bg-[hsla(336,86%,70%,0.5)]"></div>
107  <div class="flex h-fit w-full items-center justify-between">
108    <div
109      class="flex h-fit w-full flex-col items-start justify-between text-[0.75em]"
110    >
111      <div
112        class="flex flex-row items-center justify-center gap-[0.5em] p-[0.25em]"
113      >
114        <svg
115          viewBox="0 0 16 16"
116          fill="none"
117          height="16"
118          width="16"
119          xmlns="http://www.w3.org/2000/svg"
120        >
121          <path
122            d="M10.51 4.667A2 2 0 1 1 12 8H2m3.673-4.889a1.333 1.333 0 1 1 .994 2.222H2m5.673 7.556a1.333 1.333 0 1 0 .994-2.222H2"
123            stroke-width="1.5"
124            stroke-linejoin="round"
125            stroke-linecap="round"
126            stroke="#999"
127          ></path>
128        </svg>
129        <span
130          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
131        ></span>
132        <p>Wind Speed</p>
133        <span
134          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
135        ></span>
136        <p>11km/hr</p>
137      </div>
138      <div
139        class="flex flex-row items-center justify-center gap-[0.5em] p-[0.25em]"
140      >
141        <svg
142          viewBox="0 0 16 16"
143          fill="none"
144          height="16"
145          width="16"
146          xmlns="http://www.w3.org/2000/svg"
147        >
148          <g clip-path="url(#a)">
149            <path
150              d="M12.606 7.393c.638.343 1.34.55 2.06.607v1.333a6.247 6.247 0 0 1-2.553-.666h-.053A5.227 5.227 0 0 0 10 8a4.1 4.1 0 0 0-1.867.593h-.04A5.693 5.693 0 0 1 6 9.333V8a5.06 5.06 0 0 0 1.533-.573h.04A5.24 5.24 0 0 1 10 6.667a6.247 6.247 0 0 1 2.553.7l.053.026Zm-.053 2.667A6.247 6.247 0 0 0 10 9.333a5.24 5.24 0 0 0-2.427.72h-.04A5.061 5.061 0 0 1 6 10.667V12a5.695 5.695 0 0 0 2.093-.707h.04A4.098 4.098 0 0 1 10 10.667a5.225 5.225 0 0 1 2.06.606h.053c.79.42 1.66.667 2.553.727v-1.333a5.228 5.228 0 0 1-2.06-.607h-.053Zm.113-5.307V2.667a1.333 1.333 0 0 0-1.333-1.334H4.666a1.333 1.333 0 0 0-1.333 1.334V4.78a6 6 0 0 0-2-.447v1.334a5.48 5.48 0 0 1 1.753.44h.067l.18.08v1.26a6 6 0 0 0-2-.447v1.333c.605.05 1.197.198 1.753.44h.067l.18.06v1.26a5.999 5.999 0 0 0-2-.446v1.333a5.506 5.506 0 0 1 1.753.44h.067l.18.06v1.853a1.333 1.333 0 0 0 1.333 1.334h6.667a1.333 1.333 0 0 0 1.333-1.334v-.46l-.553-.206h-.053c-.254-.114-.494-.22-.727-.307v.973H4.666V2.667h6.667V4.22A4.54 4.54 0 0 0 10 4a5.24 5.24 0 0 0-2.427.72h-.04A5.06 5.06 0 0 1 6 5.333v1.334a5.693 5.693 0 0 0 2.093-.707h.04A4.1 4.1 0 0 1 10 5.333a5.227 5.227 0 0 1 2.06.607h.053c.79.42 1.66.667 2.553.727V5.333c-.7-.053-1.38-.25-2-.58Z"
151              fill="#33FF77"
152            ></path>
153          </g>
154          <defs>
155            <clipPath id="a">
156              <path d="M0 0h16v16H0z" fill="#fff"></path>
157            </clipPath>
158          </defs>
159        </svg>
160
161        <span
162          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
163        ></span>
164        <p>AQI</p>
165        <span
166          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
167        ></span>
168        <p>32</p>
169      </div>
170      <div
171        class="flex flex-row items-center justify-center gap-[0.5em] p-[0.25em]"
172      >
173        <svg
174          viewBox="0 0 16 16"
175          fill="none"
176          height="16"
177          width="16"
178          xmlns="http://www.w3.org/2000/svg"
179        >
180          <path
181            d="M8 14.667c1.719 0 2.666-.9 2.666-2.534 0-2.162-2.158-3.914-2.25-3.987a.667.667 0 0 0-.833 0c-.092.073-2.25 1.825-2.25 3.987 0 1.634.947 2.534 2.667 2.534Zm0-5.093a4.102 4.102 0 0 1 1.333 2.56c0 .74-.223 1.2-1.333 1.2-1.11 0-1.334-.46-1.334-1.2A4.102 4.102 0 0 1 8 9.573ZM4.416 1.479a.667.667 0 0 0-.833 0c-.092.074-2.25 1.826-2.25 3.988C1.333 7.1 2.28 8 4 8c1.719 0 2.666-.9 2.666-2.533 0-2.162-2.158-3.914-2.25-3.988ZM4 6.667c-1.11 0-1.334-.46-1.334-1.2A4.102 4.102 0 0 1 4 2.907a4.102 4.102 0 0 1 1.333 2.56c0 .74-.223 1.2-1.333 1.2Zm8.416-5.188a.667.667 0 0 0-.833 0c-.092.074-2.25 1.826-2.25 3.988C9.333 7.1 10.28 8 12 8c1.719 0 2.666-.9 2.666-2.533 0-2.162-2.158-3.914-2.25-3.988ZM12 6.667c-1.11 0-1.334-.46-1.334-1.2A4.102 4.102 0 0 1 12 2.907a4.102 4.102 0 0 1 1.333 2.56c0 .74-.223 1.2-1.333 1.2Z"
182            fill="#00B9E8"
183          ></path>
184        </svg>
185
186        <span
187          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
188        ></span>
189        <p>Humidity</p>
190        <span
191          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
192        ></span>
193        <p>45%</p>
194      </div>
195    </div>
196    <div
197      class="flex h-full w-[6rem] flex-col items-center py-[0.25em] text-[0.625em]"
198    >
199      <div class="group relative z-0 h-[48px] w-[48px]">
200        <svg
201          class="duration-200 ease-linear group-hover:-translate-y-[8px]"
202          viewBox="0 0 48 48"
203          fill="none"
204          height="48"
205          width="48"
206          xmlns="http://www.w3.org/2000/svg"
207        >
208          <g>
209            <path
210              d="M20.199 25.307c-1.343-6.396-6.887-10.646-12.383-9.492-5.497 1.153-8.864 7.274-7.521 13.67.829 3.949 3.259 7.078 6.29 8.625H4.328a1.505 1.505 0 1 0-1.376 2.114l.04-.002.038.002h11.944c.474 0 6.36-9.501 5.224-14.917Z"
211              fill="#6DC82A"
212            ></path>
213            <path
214              d="M20.198 25.307c-1.342-6.396-6.886-10.646-12.382-9.492a8.827 8.827 0 0 0-1.7.54c.735 6.883 2.302 16.451 5.598 23.15l-.182.111c-.354.216-.7.43-.986.608h4.43c.473 0 6.36-9.501 5.222-14.917Z"
215              fill="#5EAC24"
216            ></path>
217            <path
218              d="M47.705 29.485c1.343-6.396-2.024-12.517-7.52-13.67-5.497-1.154-11.04 3.096-12.383 9.492-1.137 5.416 4.75 14.917 5.223 14.917h11.944l.04-.002.039.002a1.506 1.506 0 1 0-1.377-2.115h-2.255c3.03-1.546 5.46-4.676 6.29-8.624Z"
219              fill="#6DC82A"
220            ></path>
221            <path
222              d="M27.802 25.307c1.342-6.396 6.886-10.646 12.383-9.492.592.124 1.16.307 1.7.54-.736 6.883-2.303 16.451-5.599 23.15.06.035.12.073.182.111.354.216.7.43.986.608h-4.43c-.472 0-6.36-9.501-5.222-14.917Z"
223              fill="#5EAC24"
224            ></path>
225            <path
226              d="M35.813 17.311H13.348l2.944 22.913h16.25l3.271-22.913Z"
227              fill="#4E901E"
228            ></path>
229            <path
230              d="M33.648 40.267c6.508-11.695 6.905-32.555 6.905-32.555a6.09 6.09 0 0 0-12.17-.321h-8.766a6.09 6.09 0 0 0-12.17.321s.636 21.945 6.906 32.555c0-.12-3.453 2.05-3.453 2.05h3.935l-.723 2.532 3.255-1.446.603 2.17 2.452-4.051s.254-.41.26-.611c.004-.169-.126-.443-.126-.443-1.128-3.242-6.642-20.457 3.445-20.457 10.341 0 4.665 17.098 3.463 20.423 0 0-.146.366-.146.477 0 .206.261.612.261.612l2.451 4.05.603-2.17 3.256 1.447-.724-2.533H37.1s-3.452-2.17-3.452-2.05Z"
231              fill="#91DC5A"
232            ></path>
233            <path
234              d="M11.098 43.081a.804.804 0 1 0 0-1.607.804.804 0 0 0 0 1.607Zm3.054 2.492a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm3.778.804a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm12.063 0a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm3.9-.804a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm3.18-2.492a.804.804 0 1 0 0-1.607.804.804 0 0 0 0 1.607Z"
235              fill="#5EAC24"
236            ></path>
237            <path
238              d="M13.544 12.699a4.547 4.547 0 1 0 0-9.093 4.547 4.547 0 0 0 0 9.093Z"
239              fill="#6DC82A"
240            ></path>
241            <path
242              d="M13.544 11.717A3.57 3.57 0 0 1 9.98 8.152a3.57 3.57 0 0 1 3.565-3.566 3.57 3.57 0 0 1 3.566 3.566 3.57 3.57 0 0 1-3.566 3.565Z"
243              fill="#5EAC24"
244            ></path>
245            <path
246              d="M15.736 8.708h-4.384a.558.558 0 0 1-.556-.556c0-.306.25-.557.556-.557h4.384c.305 0 .556.25.556.557 0 .305-.25.556-.556.556Z"
247              fill="#57565C"
248            ></path>
249            <path
250              d="M34.449 12.699a4.547 4.547 0 1 0 0-9.094 4.547 4.547 0 0 0 0 9.094Z"
251              fill="#6DC82A"
252            ></path>
253            <path
254              d="M34.45 11.717a3.57 3.57 0 0 1-3.566-3.565 3.57 3.57 0 0 1 3.566-3.566 3.57 3.57 0 0 1 3.565 3.566 3.57 3.57 0 0 1-3.566 3.565Z"
255              fill="#5EAC24"
256            ></path>
257            <path
258              d="M36.64 8.708h-4.383a.558.558 0 0 1-.556-.556c0-.306.25-.557.556-.557h4.384a.558.558 0 0 1 0 1.112Z"
259              fill="#57565C"
260            ></path>
261            <path
262              d="M13.633 17.555c-.706-.008-2.058-.41-2.18-1.868a.736.736 0 0 1 1.467-.123c.038.456.557.512.724.518h20.713c.167-.006.686-.062.724-.518a.735.735 0 1 1 1.467.123c-.122 1.459-1.474 1.86-2.172 1.868H13.633Z"
263              fill="#6DC82A"
264            ></path>
265            <path
266              d="M42.449 34.38a.736.736 0 0 1-.546-1.23c.313-.346.604-.728.865-1.134a.736.736 0 1 1 1.239.796 10.29 10.29 0 0 1-1.011 1.326.734.734 0 0 1-.547.243Zm2.375-4.764a.736.736 0 0 1-.721-.887c.453-2.155.198-4.32-.716-6.096a.736.736 0 0 1 1.308-.674c1.07 2.075 1.37 4.587.849 7.072a.736.736 0 0 1-.72.585Z"
267              fill="#5EAC24"
268            ></path>
269          </g>
270        </svg>
271        <span
272          class="absolute bottom-[8px] left-1/2 z-[-1] h-[4px] w-[32px] -translate-x-1/2 bg-[#68082e] blur-[6px] duration-200 ease-linear group-hover:w-[16px] group-hover:blur-[4px]"
273        ></span>
274      </div>
275      <p class="text-center font-light">Feels like 24°C</p>
276    </div>
277  </div>
278</div>
279

<div
  class="weather flex min-h-[10em] min-w-[16em] flex-col items-center justify-center gap-[0.5em] rounded-[1.5em] bg-[#FFDAE9] px-[1em] py-[0.5em] font-nunito text-[#F471A6] shadow-[0px_4px_16px_0px_#222]"
>
  <div class="flex h-fit w-full items-center justify-center gap-[1em]">
    <svg
      viewBox="0 0 80 80"
      fill="none"
      height="80"
      width="80"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M77.39 46.522c0 1.478-.086 2.974-.26 4.435 0 .035-.017.035-.017.07L61.72 46.921c.018-.14.018-.261.018-.4 0-11.983-9.757-21.74-21.74-21.74-11.982 0-21.738 9.757-21.738 21.74v.33l-15.392 4.14v-.035a37.706 37.706 0 0 1-.26-4.435c0-20.609 16.765-37.392 37.39-37.392 20.627 0 37.392 16.783 37.392 37.392Z"
        fill="#F95428"
      ></path>
      <path
        d="M66.956 46.522c0 .452-.017.887-.034 1.322v.052L49.86 52.47a2.32 2.32 0 0 1 .243-.887c.8-1.583 1.2-3.288 1.2-5.061 0-6.227-5.078-11.305-11.305-11.305-6.226 0-11.304 5.078-11.304 11.305 0 1.773.4 3.478 1.2 5.06a2.4 2.4 0 0 1 .261 1.079l-17.043-4.574a1.026 1.026 0 0 1-.035-.244 31.56 31.56 0 0 1-.035-1.321c0-14.87 12.087-26.957 26.956-26.957 14.87 0 26.957 12.087 26.957 26.957Z"
        fill="#F5B420"
      ></path>
      <path
        d="M77.391 46.522c0 1.478-.087 2.974-.26 4.435 0 .035-.018.035-.018.07l-15.391-4.105c.017-.14.017-.261.017-.4 0-11.983-9.756-21.74-21.739-21.74V9.13c20.626 0 37.391 16.783 37.391 37.392Z"
        fill="#EA3B18"
      ></path>
      <path
        d="M66.957 46.522c0 .452-.017.887-.035 1.322v.052L49.861 52.47c.017-.296.105-.61.244-.887.8-1.583 1.2-3.288 1.2-5.061 0-6.227-5.079-11.305-11.305-11.305V19.565c14.87 0 26.957 12.087 26.957 26.957Z"
        fill="#F09C12"
      ></path>
      <path
        d="M74.541 53.265a2.608 2.608 0 0 1-2.594-2.917c.15-1.262.227-2.549.227-3.826C72.174 28.78 57.74 14.348 40 14.348c-17.742 0-32.174 14.432-32.174 32.174 0 1.277.076 2.564.226 3.826a2.608 2.608 0 0 1-2.283 2.898c-1.401.175-2.726-.85-2.897-2.281a37.624 37.624 0 0 1-.264-4.443C2.608 25.904 19.381 9.13 40 9.13c20.618 0 37.39 16.774 37.39 37.392 0 1.482-.087 2.977-.262 4.443a2.609 2.609 0 0 1-2.587 2.3Z"
        fill="#E6563A"
      ></path>
      <path
        d="M72.174 46.522c0 1.277-.077 2.564-.226 3.826a2.608 2.608 0 1 0 5.18.617 37.64 37.64 0 0 0 .263-4.443C77.391 25.904 60.618 9.13 40 9.13v5.218c17.741 0 32.174 14.432 32.174 32.174Z"
        fill="#D9472B"
      ></path>
      <path
        d="m64.32 50.339-.124-.003a2.608 2.608 0 0 1-2.483-2.727c.017-.361.025-.723.025-1.088 0-11.987-9.752-21.739-21.739-21.739S18.26 34.534 18.26 46.522c0 .364.009.726.026 1.087a2.608 2.608 0 0 1-2.483 2.727c-1.473.051-2.662-1.046-2.728-2.485a29.3 29.3 0 0 1-.032-1.33c0-14.864 12.092-26.956 26.956-26.956 14.865 0 26.957 12.092 26.957 26.957 0 .446-.012.889-.032 1.33a2.608 2.608 0 0 1-2.604 2.487Z"
        fill="#FFC033"
      ></path>
      <path
        d="M61.739 46.522c0 .364-.009.726-.025 1.087a2.608 2.608 0 1 0 5.21.243c.02-.44.033-.884.033-1.33 0-14.864-12.093-26.957-26.957-26.957v5.218c11.987 0 21.739 9.752 21.739 21.739Z"
        fill="#F9A926"
      ></path>
      <path
        d="M52.44 55.357a2.608 2.608 0 0 1-2.329-3.781 11.157 11.157 0 0 0 1.194-5.054c0-6.233-5.072-11.305-11.305-11.305S28.696 40.29 28.696 46.522c0 1.777.402 3.477 1.194 5.053a2.608 2.608 0 1 1-4.66 2.344 16.317 16.317 0 0 1-1.752-7.397C23.479 37.412 30.89 30 40 30s16.522 7.412 16.522 16.522c0 2.6-.59 5.087-1.751 7.397a2.608 2.608 0 0 1-2.332 1.438Z"
        fill="#3AACE6"
      ></path>
      <path
        d="M51.304 46.522c0 1.777-.402 3.477-1.194 5.053a2.608 2.608 0 1 0 4.66 2.344 16.316 16.316 0 0 0 1.752-7.397C56.522 37.412 49.11 30 40 30v5.217c6.233 0 11.304 5.072 11.304 11.305Z"
        fill="#2B9FD9"
      ></path>
      <path
        d="m69.543 50.322-.102-.001a2.609 2.609 0 0 1-2.506-2.708 30.4 30.4 0 0 0 .022-1.091c0-14.864-12.092-26.957-26.957-26.957-14.864 0-26.956 12.092-26.956 26.957 0 .365.008.73.022 1.09a2.61 2.61 0 0 1-2.507 2.709 2.6 2.6 0 0 1-2.707-2.506 32.62 32.62 0 0 1-.026-1.293C7.826 28.78 22.26 14.348 40 14.348S72.174 28.78 72.174 46.522c0 .433-.009.863-.026 1.293a2.609 2.609 0 0 1-2.605 2.508Z"
        fill="#FF9F19"
      ></path>
      <path
        d="M66.957 46.522c0 .365-.009.73-.022 1.091a2.61 2.61 0 0 0 5.213.202c.017-.43.026-.86.026-1.293C72.174 28.78 57.74 14.348 40 14.348v5.217c14.864 0 26.957 12.093 26.957 26.957Z"
        fill="#F28618"
      ></path>
      <path
        d="M57.765 56.23a2.609 2.609 0 0 1-2.42-3.581 16.371 16.371 0 0 0 1.177-6.127C56.522 37.412 49.11 30 40 30s-16.522 7.412-16.522 16.522c0 2.119.396 4.18 1.177 6.127a2.609 2.609 0 0 1-1.449 3.392 2.612 2.612 0 0 1-3.391-1.45 21.559 21.559 0 0 1-1.554-8.07c0-11.986 9.752-21.738 21.739-21.738s21.739 9.752 21.739 21.739c0 2.787-.523 5.503-1.554 8.07a2.607 2.607 0 0 1-2.42 1.638Z"
        fill="#88CC2A"
      ></path>
      <path
        d="M56.522 46.522c0 2.119-.396 4.18-1.177 6.127a2.609 2.609 0 0 0 4.84 1.943 21.559 21.559 0 0 0 1.554-8.07c0-11.987-9.752-21.74-21.739-21.74V30c9.11 0 16.522 7.412 16.522 16.522Z"
        fill="#7FB335"
      ></path>
      <path
        d="M66.957 44.782c-4.253 0-8.207 2.105-10.623 5.516-6.448-1.604-12.856 3.352-12.856 10.137 0 5.754 4.681 10.434 10.435 10.434h13.044C74.149 70.87 80 65.02 80 57.827c0-7.192-5.85-13.044-13.043-13.044Z"
        fill="#DAE1E6"
      ></path>
      <path
        d="M23.667 50.298c-2.417-3.411-6.37-5.516-10.624-5.516C5.851 44.782 0 50.633 0 57.826c0 7.192 5.85 13.043 13.043 13.043h13.044c5.754 0 10.435-4.68 10.435-10.434 0-6.774-6.397-11.744-12.855-10.137Z"
        fill="#EDF0F2"
      ></path>
    </svg>
    <span
      class="h-[4em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
    ></span>
    <div class="flex flex-col items-start justify-center">
      <p class="text-[0.75rem] font-light">Seasoning City, Dishland</p>
      <p class="text-[1.5em] font-semibold">28°C</p>
      <div class="flex items-center justify-center gap-[0.125em]">
        <svg
          viewBox="0 0 16 17"
          fill="none"
          height="17"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8 14.26A5.92 5.92 0 1 0 8 2.42a5.92 5.92 0 0 0 0 11.84Z"
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke="#F471A6"
          ></path>
          <path
            d="M8.595 5.716A.589.589 0 0 1 8 6.292a.576.576 0 1 1 .595-.576Zm-1.05 5.363V7.636a.448.448 0 0 1 .629-.425.441.441 0 0 1 .268.425v3.443a.449.449 0 0 1-.896 0Z"
            fill="#F471A6"
          ></path>
        </svg>
        <p class="text-[0.625rem] font-light">Don’t miss out the Rainbow</p>
      </div>
    </div>
  </div>
  <div class="h-[0.5px] w-full rounded-full bg-[hsla(336,86%,70%,0.5)]"></div>
  <div class="flex h-fit w-full items-center justify-between">
    <div
      class="flex h-fit w-full flex-col items-start justify-between text-[0.75em]"
    >
      <div
        class="flex flex-row items-center justify-center gap-[0.5em] p-[0.25em]"
      >
        <svg
          viewBox="0 0 16 16"
          fill="none"
          height="16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.51 4.667A2 2 0 1 1 12 8H2m3.673-4.889a1.333 1.333 0 1 1 .994 2.222H2m5.673 7.556a1.333 1.333 0 1 0 .994-2.222H2"
            stroke-width="1.5"
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke="#999"
          ></path>
        </svg>
        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>Wind Speed</p>
        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>11km/hr</p>
      </div>
      <div
        class="flex flex-row items-center justify-center gap-[0.5em] p-[0.25em]"
      >
        <svg
          viewBox="0 0 16 16"
          fill="none"
          height="16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clip-path="url(#a)">
            <path
              d="M12.606 7.393c.638.343 1.34.55 2.06.607v1.333a6.247 6.247 0 0 1-2.553-.666h-.053A5.227 5.227 0 0 0 10 8a4.1 4.1 0 0 0-1.867.593h-.04A5.693 5.693 0 0 1 6 9.333V8a5.06 5.06 0 0 0 1.533-.573h.04A5.24 5.24 0 0 1 10 6.667a6.247 6.247 0 0 1 2.553.7l.053.026Zm-.053 2.667A6.247 6.247 0 0 0 10 9.333a5.24 5.24 0 0 0-2.427.72h-.04A5.061 5.061 0 0 1 6 10.667V12a5.695 5.695 0 0 0 2.093-.707h.04A4.098 4.098 0 0 1 10 10.667a5.225 5.225 0 0 1 2.06.606h.053c.79.42 1.66.667 2.553.727v-1.333a5.228 5.228 0 0 1-2.06-.607h-.053Zm.113-5.307V2.667a1.333 1.333 0 0 0-1.333-1.334H4.666a1.333 1.333 0 0 0-1.333 1.334V4.78a6 6 0 0 0-2-.447v1.334a5.48 5.48 0 0 1 1.753.44h.067l.18.08v1.26a6 6 0 0 0-2-.447v1.333c.605.05 1.197.198 1.753.44h.067l.18.06v1.26a5.999 5.999 0 0 0-2-.446v1.333a5.506 5.506 0 0 1 1.753.44h.067l.18.06v1.853a1.333 1.333 0 0 0 1.333 1.334h6.667a1.333 1.333 0 0 0 1.333-1.334v-.46l-.553-.206h-.053c-.254-.114-.494-.22-.727-.307v.973H4.666V2.667h6.667V4.22A4.54 4.54 0 0 0 10 4a5.24 5.24 0 0 0-2.427.72h-.04A5.06 5.06 0 0 1 6 5.333v1.334a5.693 5.693 0 0 0 2.093-.707h.04A4.1 4.1 0 0 1 10 5.333a5.227 5.227 0 0 1 2.06.607h.053c.79.42 1.66.667 2.553.727V5.333c-.7-.053-1.38-.25-2-.58Z"
              fill="#33FF77"
            ></path>
          </g>
          <defs>
            <clipPath id="a">
              <path d="M0 0h16v16H0z" fill="#fff"></path>
            </clipPath>
          </defs>
        </svg>

        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>AQI</p>
        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>32</p>
      </div>
      <div
        class="flex flex-row items-center justify-center gap-[0.5em] p-[0.25em]"
      >
        <svg
          viewBox="0 0 16 16"
          fill="none"
          height="16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8 14.667c1.719 0 2.666-.9 2.666-2.534 0-2.162-2.158-3.914-2.25-3.987a.667.667 0 0 0-.833 0c-.092.073-2.25 1.825-2.25 3.987 0 1.634.947 2.534 2.667 2.534Zm0-5.093a4.102 4.102 0 0 1 1.333 2.56c0 .74-.223 1.2-1.333 1.2-1.11 0-1.334-.46-1.334-1.2A4.102 4.102 0 0 1 8 9.573ZM4.416 1.479a.667.667 0 0 0-.833 0c-.092.074-2.25 1.826-2.25 3.988C1.333 7.1 2.28 8 4 8c1.719 0 2.666-.9 2.666-2.533 0-2.162-2.158-3.914-2.25-3.988ZM4 6.667c-1.11 0-1.334-.46-1.334-1.2A4.102 4.102 0 0 1 4 2.907a4.102 4.102 0 0 1 1.333 2.56c0 .74-.223 1.2-1.333 1.2Zm8.416-5.188a.667.667 0 0 0-.833 0c-.092.074-2.25 1.826-2.25 3.988C9.333 7.1 10.28 8 12 8c1.719 0 2.666-.9 2.666-2.533 0-2.162-2.158-3.914-2.25-3.988ZM12 6.667c-1.11 0-1.334-.46-1.334-1.2A4.102 4.102 0 0 1 12 2.907a4.102 4.102 0 0 1 1.333 2.56c0 .74-.223 1.2-1.333 1.2Z"
            fill="#00B9E8"
          ></path>
        </svg>

        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>Humidity</p>
        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>45%</p>
      </div>
    </div>
    <div
      class="flex h-full w-[6rem] flex-col items-center py-[0.25em] text-[0.625em]"
    >
      <div class="group relative z-0 h-[48px] w-[48px]">
        <svg
          class="duration-200 ease-linear group-hover:-translate-y-[8px]"
          viewBox="0 0 48 48"
          fill="none"
          height="48"
          width="48"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g>
            <path
              d="M20.199 25.307c-1.343-6.396-6.887-10.646-12.383-9.492-5.497 1.153-8.864 7.274-7.521 13.67.829 3.949 3.259 7.078 6.29 8.625H4.328a1.505 1.505 0 1 0-1.376 2.114l.04-.002.038.002h11.944c.474 0 6.36-9.501 5.224-14.917Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M20.198 25.307c-1.342-6.396-6.886-10.646-12.382-9.492a8.827 8.827 0 0 0-1.7.54c.735 6.883 2.302 16.451 5.598 23.15l-.182.111c-.354.216-.7.43-.986.608h4.43c.473 0 6.36-9.501 5.222-14.917Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M47.705 29.485c1.343-6.396-2.024-12.517-7.52-13.67-5.497-1.154-11.04 3.096-12.383 9.492-1.137 5.416 4.75 14.917 5.223 14.917h11.944l.04-.002.039.002a1.506 1.506 0 1 0-1.377-2.115h-2.255c3.03-1.546 5.46-4.676 6.29-8.624Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M27.802 25.307c1.342-6.396 6.886-10.646 12.383-9.492.592.124 1.16.307 1.7.54-.736 6.883-2.303 16.451-5.599 23.15.06.035.12.073.182.111.354.216.7.43.986.608h-4.43c-.472 0-6.36-9.501-5.222-14.917Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M35.813 17.311H13.348l2.944 22.913h16.25l3.271-22.913Z"
              fill="#4E901E"
            ></path>
            <path
              d="M33.648 40.267c6.508-11.695 6.905-32.555 6.905-32.555a6.09 6.09 0 0 0-12.17-.321h-8.766a6.09 6.09 0 0 0-12.17.321s.636 21.945 6.906 32.555c0-.12-3.453 2.05-3.453 2.05h3.935l-.723 2.532 3.255-1.446.603 2.17 2.452-4.051s.254-.41.26-.611c.004-.169-.126-.443-.126-.443-1.128-3.242-6.642-20.457 3.445-20.457 10.341 0 4.665 17.098 3.463 20.423 0 0-.146.366-.146.477 0 .206.261.612.261.612l2.451 4.05.603-2.17 3.256 1.447-.724-2.533H37.1s-3.452-2.17-3.452-2.05Z"
              fill="#91DC5A"
            ></path>
            <path
              d="M11.098 43.081a.804.804 0 1 0 0-1.607.804.804 0 0 0 0 1.607Zm3.054 2.492a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm3.778.804a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm12.063 0a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm3.9-.804a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm3.18-2.492a.804.804 0 1 0 0-1.607.804.804 0 0 0 0 1.607Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M13.544 12.699a4.547 4.547 0 1 0 0-9.093 4.547 4.547 0 0 0 0 9.093Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M13.544 11.717A3.57 3.57 0 0 1 9.98 8.152a3.57 3.57 0 0 1 3.565-3.566 3.57 3.57 0 0 1 3.566 3.566 3.57 3.57 0 0 1-3.566 3.565Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M15.736 8.708h-4.384a.558.558 0 0 1-.556-.556c0-.306.25-.557.556-.557h4.384c.305 0 .556.25.556.557 0 .305-.25.556-.556.556Z"
              fill="#57565C"
            ></path>
            <path
              d="M34.449 12.699a4.547 4.547 0 1 0 0-9.094 4.547 4.547 0 0 0 0 9.094Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M34.45 11.717a3.57 3.57 0 0 1-3.566-3.565 3.57 3.57 0 0 1 3.566-3.566 3.57 3.57 0 0 1 3.565 3.566 3.57 3.57 0 0 1-3.566 3.565Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M36.64 8.708h-4.383a.558.558 0 0 1-.556-.556c0-.306.25-.557.556-.557h4.384a.558.558 0 0 1 0 1.112Z"
              fill="#57565C"
            ></path>
            <path
              d="M13.633 17.555c-.706-.008-2.058-.41-2.18-1.868a.736.736 0 0 1 1.467-.123c.038.456.557.512.724.518h20.713c.167-.006.686-.062.724-.518a.735.735 0 1 1 1.467.123c-.122 1.459-1.474 1.86-2.172 1.868H13.633Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M42.449 34.38a.736.736 0 0 1-.546-1.23c.313-.346.604-.728.865-1.134a.736.736 0 1 1 1.239.796 10.29 10.29 0 0 1-1.011 1.326.734.734 0 0 1-.547.243Zm2.375-4.764a.736.736 0 0 1-.721-.887c.453-2.155.198-4.32-.716-6.096a.736.736 0 0 1 1.308-.674c1.07 2.075 1.37 4.587.849 7.072a.736.736 0 0 1-.72.585Z"
              fill="#5EAC24"
            ></path>
          </g>
        </svg>
        <span
          class="absolute bottom-[8px] left-1/2 z-[-1] h-[4px] w-[32px] -translate-x-1/2 bg-[#68082e] blur-[6px] duration-200 ease-linear group-hover:w-[16px] group-hover:blur-[4px]"
        ></span>
      </div>
      <p class="text-center font-light">Feels like 24°C</p>
    </div>
  </div>
</div>

297 views

Copy to Figma

297 views

Comments

No variations yet

MIT License

Copyright - 2024 Uncannypotato69  

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.