1<div
2  class="fitCard flex min-h-[24em] min-w-[18em] flex-col items-center justify-center gap-[0.5rem] rounded-[1.5em] bg-[#FFFACD] p-[0.5rem] font-monts text-[#B49A18]"
3>
4  <div
5    class="flex h-[4em] w-full items-center justify-between rounded-[1.5em] bg-[#FFF599] p-[0.5rem]"
6  >
7    <svg
8      viewBox="0 0 48 48"
9      fill="none"
10      height="48"
11      width="48"
12      xmlns="http://www.w3.org/2000/svg"
13    >
14      <path
15        d="M37.99 38.293C37.785 34.785 34.733 32 31 32H17c-3.735 0-6.786 2.785-6.99 6.293m27.98 0A19.94 19.94 0 0 0 44 24c0-11.046-8.954-20-20-20S4 12.954 4 24a19.94 19.94 0 0 0 6.01 14.293m27.98 0A19.935 19.935 0 0 1 24 44a19.935 19.935 0 0 1-13.99-5.707M30 20a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z"
16        stroke-width="2"
17        stroke-linejoin="round"
18        stroke-linecap="round"
19        stroke="#B49A18"
20      ></path>
21    </svg>
22    <p class="text-[1.25rem] font-semibold">Manpreet</p>
23  </div>
24  <div class="flex h-fit w-full items-center justify-center gap-[0.5em]">
25    <div
26      class="group relative flex h-[10em] w-[10em] items-center justify-center rounded-[1.5em] bg-[#FFF599] px-[0.5rem] pt-[1rem]"
27    >
28      <svg
29        class="absolute left-1/2 top-[calc(50%+8px)] h-[9rem] w-[9rem] -translate-x-1/2 -translate-y-1/2"
30        viewBox="0 0 160 160"
31        fill="none"
32        height="160"
33        width="160"
34        xmlns="http://www.w3.org/2000/svg"
35      >
36        <path
37          d="M130.912 130.912a71.997 71.997 0 0 0-10.911-110.778A71.999 71.999 0 0 0 9.383 94.046a72.004 72.004 0 0 0 19.705 36.866"
38          stroke-width="16"
39          stroke-linecap="round"
40          stroke="#EEDC82"
41        ></path>
42        <path
43          d="M146.65 52.764A72.004 72.004 0 0 0 69.647 8.748a71.998 71.998 0 0 0-40.559 122.164"
44          class="duration-[1s] [stroke-dasharray:100] [stroke-dashoffset:-98] group-hover:[stroke-dashoffset:0]"
45          pathLength="100"
46          stroke-width="16"
47          stroke-linecap="round"
48          stroke="#B49A18"
49        ></path>
50      </svg>
51      <p class="text-[0.75rem] font-semibold">1729/2500 Steps</p>
52    </div>
53    <div
54      class="flex h-[10em] flex-1 flex-col items-center justify-center gap-[0.5rem]"
55    >
56      <div
57        class="flex w-full flex-1 items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
58      >
59        <div
60          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[300%]"
61        >
62          <svg
63            viewBox="0 0 48 48"
64            fill="none"
65            height="48"
66            width="48"
67            xmlns="http://www.w3.org/2000/svg"
68          >
69            <path
70              d="m11 32 7-9 6 9 6-9 5 8h9"
71              stroke-width="4"
72              stroke-miterlimit="2"
73              stroke-linejoin="round"
74              stroke-linecap="round"
75              stroke="#B49A18"
76            ></path>
77            <path
78              d="M44 19c0-6.075-4.925-11-11-11-3.72 0-7.01 1.847-9 4.674A10.987 10.987 0 0 0 15 8C8.925 8 4 12.925 4 19c0 11 13 21 20 23.326 1.194-.397 2.562-1.016 4.01-1.826"
79              stroke-width="4"
80              stroke-linejoin="round"
81              stroke-linecap="round"
82              stroke="#B49A18"
83            ></path>
84          </svg>
85        </div>
86        <p
87          class="absolute left-1/2 top-1/2 h-fit w-full -translate-x-1/2 translate-y-[150%] text-center text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
88        >
89          98 bpm
90        </p>
91      </div>
92      <div
93        class="flex w-full flex-1 items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
94      >
95        <div
96          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[300%]"
97        >
98          <svg
99            viewBox="0 0 48 48"
100            fill="none"
101            height="48"
102            width="48"
103            xmlns="http://www.w3.org/2000/svg"
104          >
105            <g clip-path="url(#a)">
106              <path
107                d="M47.32 28.378a1.776 1.776 0 0 0-1.98-.142c-2.977 1.71-6.122 2.578-9.35 2.578-10.37 0-18.807-8.437-18.807-18.808 0-3.242.869-6.383 2.582-9.336A1.775 1.775 0 0 0 17.738.073 24.833 24.833 0 0 0 5.04 8.7C1.743 12.976 0 18.096 0 23.508c0 13.503 10.985 24.489 24.488 24.489 5.412 0 10.533-1.742 14.81-5.04a24.817 24.817 0 0 0 8.632-12.69 1.774 1.774 0 0 0-.61-1.889ZM24.488 44.446c-11.545 0-20.937-9.393-20.937-20.938 0-7.788 4.457-14.876 11.23-18.438a21.423 21.423 0 0 0-1.149 6.936c0 12.329 10.03 22.36 22.358 22.36a21.49 21.49 0 0 0 6.948-1.154c-3.561 6.775-10.655 11.233-18.45 11.233Z"
108                fill="#B49A18"
109              ></path>
110            </g>
111            <defs>
112              <clipPath id="a">
113                <path d="M0 0h48v48H0z" fill="#fff"></path>
114              </clipPath>
115            </defs>
116          </svg>
117        </div>
118        <p
119          class="absolute left-1/2 top-1/2 h-fit w-full -translate-x-1/2 translate-y-[150%] text-center text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
120        >
121          7.5 hrs
122        </p>
123      </div>
124    </div>
125  </div>
126  <div
127    class="flex h-[4.5rem] w-full flex-row items-center justify-center gap-[0.5rem]"
128  >
129    <div
130      class="flex h-full w-[10rem] items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
131    >
132      <div
133        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[300%]"
134      >
135        <svg
136          viewBox="0 0 48 48"
137          fill="none"
138          height="48"
139          width="48"
140          xmlns="http://www.w3.org/2000/svg"
141        >
142          <path
143            d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Z"
144            stroke-width="3"
145            stroke-linecap="round"
146            stroke="#B49A18"
147          ></path>
148          <path
149            d="M18.804 27a5.999 5.999 0 0 0 10.392 0"
150            stroke-width="3"
151            stroke-linecap="round"
152            stroke="#B49A18"
153          ></path>
154          <path
155            d="M18 15.75h-2a2.25 2.25 0 0 0 0 4.5h2a2.25 2.25 0 0 0 0-4.5Zm14 0h-2a2.25 2.25 0 0 0 0 4.5h2a2.25 2.25 0 0 0 0-4.5Z"
156            stroke-width=".25"
157            stroke-linecap="round"
158            stroke="#B49A18"
159            fill="#B49A18"
160          ></path>
161        </svg>
162      </div>
163
164      <p
165        class="absolute left-1/2 top-1/2 h-fit w-fit -translate-x-1/2 translate-y-[150%] text-left text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
166      >
167        Happy
168      </p>
169    </div>
170    <div
171      class="flex h-full w-[6.5rem] items-center justify-center rounded-[1.5rem] bg-[#FFF599] relative group overflow-hidden"
172    >
173      <div
174        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[250%]"
175      >
176        <svg
177          viewBox="0 0 48 52"
178          fill="none"
179          height="52"
180          width="48"
181          xmlns="http://www.w3.org/2000/svg"
182        >
183          <path
184            d="M32.87 18.07c0-2.808 3.734-3.553 4.725-.925 2.397 6.356 4.144 12.042 4.144 15.116 0 9.797-7.942 17.739-17.74 17.739-9.796 0-17.738-7.942-17.738-17.739 0-3.303 2.016-9.62 4.688-16.544 3.463-8.97 5.194-13.455 7.33-13.696a3.641 3.641 0 0 1 2.04.38c1.907.995 1.907 5.886 1.907 15.67a5.322 5.322 0 0 0 10.643 0Z"
185            stroke-width="3"
186            stroke="#B49A18"
187          ></path>
188          <path
189            d="m20.452 50-.932-2.331a12.086 12.086 0 0 1 1.784-12.038 3.453 3.453 0 0 1 5.392 0 12.085 12.085 0 0 1 1.784 12.038l-.932 2.33"
190            stroke-width="3"
191            stroke="#B49A18"
192          ></path>
193        </svg>
194      </div>
195
196      <p
197        class="absolute left-1/2 top-1/2 h-fit w-fit -translate-x-1/2 translate-y-[150%] text-left text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
198      >
199        1240cal
200      </p>
201    </div>
202  </div>
203  <div
204    class="group relative flex h-[5em] w-full items-center justify-center overflow-hidden rounded-[1.5rem] bg-[#FFF599]"
205  >
206    <p
207      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-500 group-hover:-translate-x-[250%]"
208    >
209      Today's Quote
210    </p>
211    <p
212      class="absolute left-1/2 top-1/2 h-fit w-full -translate-y-1/2 translate-x-1/2 px-[1rem] text-left text-[0.75rem] font-bold duration-500 group-hover:-translate-x-1/2 text-center"
213    >
214      “The real workout starts when you want to stop.” – Ronnie Coleman
215    </p>
216  </div>
217</div>
218