Card by Javierrocadev

1<div
2  class="group hover:-rotate-0 [transform:rotate3d(1_,-1,_1,_15deg)] duration-500 overflow-hidden bg-gradient-to-bl from-sky-400 via-sky-500 to-sky-700 p-6 rounded-lg hover:shadow-lg [box-shadow:12px_12px_0px_0px_#0d0d0d] backdrop-filter backdrop-blur-md border border-neutral-600"
3>
4  <div class="flex items-center justify-between">
5    <div>
6      <h2 class="text-2xl font-bold text-white">City Name</h2>
7      <p class="text-neutral-800">Sunny</p>
8    </div>
9    <svg
10      xmlns="http://www.w3.org/2000/svg"
11      width="48px"
12      height="48px"
13      viewBox="0 0 24 24"
14      fill="none"
15      class="absolute -top-2 -right-2 w-12 h-12 stroke-yellow-300"
16    >
17      <path
18        d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
19        stroke=""
20        stroke-width="2"
21        stroke-linecap="round"
22        stroke-linejoin="round"
23      ></path>
24    </svg>
25  </div>
26  <div class="mt-4">
27    <p class="text-4xl font-bold text-white">22°C</p>
28    <div class="flex items-center justify-between gap-1">
29      <span class="mr-2 text-neutral-800">Feels Like</span>
30      <span class="text-white">20°C</span>
31    </div>
32    <div class="flex items-center justify-between gap-1">
33      <span class="text-neutral-800">Wind</span>
34      <span class="text-white">10 km/h</span>
35    </div>
36    <div class="flex items-center justify-between gap-1">
37      <span class="text-neutral-800">Humidity</span>
38      <span class="text-white">75%</span>
39    </div>
40  </div>
41</div>
42