Card by SmookyDev

1<div
2  class="w-[300px] aspect-video rounded-lg shadow flex flex-col items-center justify-center gap-2 bg-slate-50 group"
3>
4  <div
5    class="flex flex-col items-center p-8 rounded-md w-full sm:px-12 bg-gray-900 text-gray-100"
6  >
7    <div class="text-center">
8      <h2 class="text-xl font-semibold">Dubai</h2>
9      <p class="text-sm text-gray-400">March 13</p>
10    </div>
11    <svg
12      class="w-32 h-32 p-6 text-yellow-400 fill-current animate-[spin_5s_linear_infinite;]"
13      viewBox="0 0 512 512"
14      xmlns="http://www.w3.org/2000/svg"
15    >
16      <path
17        d="M256,104c-83.813,0-152,68.187-152,152s68.187,152,152,152,152-68.187,152-152S339.813,104,256,104Zm0,272A120,120,0,1,1,376,256,120.136,120.136,0,0,1,256,376Z"
18      ></path>
19      <rect
20        class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
21        y="16"
22        x="240"
23        height="48"
24        width="32"
25      ></rect>
26      <rect
27        class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
28        y="448"
29        x="240"
30        height="48"
31        width="32"
32      ></rect>
33      <rect
34        class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
35        y="240"
36        x="448"
37        height="32"
38        width="48"
39      ></rect>
40      <rect
41        class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
42        y="240"
43        x="16"
44        height="32"
45        width="48"
46      ></rect>
47      <rect
48        class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
49        transform="rotate(-45 416 416)"
50        y="393.373"
51        x="400"
52        height="45.255"
53        width="32"
54      ></rect>
55      <rect
56        class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
57        transform="rotate(-45 96 96)"
58        y="73.373"
59        x="80"
60        height="45.255"
61        width="32.001"
62      ></rect>
63      <rect
64        class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
65        transform="rotate(-45.001 96.002 416.003)"
66        y="400"
67        x="73.373"
68        height="32"
69        width="45.255"
70      ></rect>
71      <rect
72        class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
73        transform="rotate(-45 416 96)"
74        y="80"
75        x="393.373"
76        height="32.001"
77        width="45.255"
78      ></rect>
79    </svg>
80    <div class="mb-2 text-3xl font-semibold">
81      27° <span class="mx-1 font-normal">/</span>19°
82    </div>
83    <p class="text-gray-400">Sunny</p>
84  </div>
85</div>
86