Card by Uncannypotato69

#4b3621

HTML +TailwindCSS

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

<div
  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]"
>
  <div
    class="flex h-[4em] w-full items-center justify-between rounded-[1.5em] bg-[#FFF599] p-[0.5rem]"
  >
    <svg
      viewBox="0 0 48 48"
      fill="none"
      height="48"
      width="48"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        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"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="#B49A18"
      ></path>
    </svg>
    <p class="text-[1.25rem] font-semibold">Manpreet</p>
  </div>
  <div class="flex h-fit w-full items-center justify-center gap-[0.5em]">
    <div
      class="group relative flex h-[10em] w-[10em] items-center justify-center rounded-[1.5em] bg-[#FFF599] px-[0.5rem] pt-[1rem]"
    >
      <svg
        class="absolute left-1/2 top-[calc(50%+8px)] h-[9rem] w-[9rem] -translate-x-1/2 -translate-y-1/2"
        viewBox="0 0 160 160"
        fill="none"
        height="160"
        width="160"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          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"
          stroke-width="16"
          stroke-linecap="round"
          stroke="#EEDC82"
        ></path>
        <path
          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"
          class="duration-[1s] [stroke-dasharray:100] [stroke-dashoffset:-98] group-hover:[stroke-dashoffset:0]"
          pathLength="100"
          stroke-width="16"
          stroke-linecap="round"
          stroke="#B49A18"
        ></path>
      </svg>
      <p class="text-[0.75rem] font-semibold">1729/2500 Steps</p>
    </div>
    <div
      class="flex h-[10em] flex-1 flex-col items-center justify-center gap-[0.5rem]"
    >
      <div
        class="flex w-full flex-1 items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
      >
        <div
          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%]"
        >
          <svg
            viewBox="0 0 48 48"
            fill="none"
            height="48"
            width="48"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m11 32 7-9 6 9 6-9 5 8h9"
              stroke-width="4"
              stroke-miterlimit="2"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke="#B49A18"
            ></path>
            <path
              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"
              stroke-width="4"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke="#B49A18"
            ></path>
          </svg>
        </div>
        <p
          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"
        >
          98 bpm
        </p>
      </div>
      <div
        class="flex w-full flex-1 items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
      >
        <div
          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%]"
        >
          <svg
            viewBox="0 0 48 48"
            fill="none"
            height="48"
            width="48"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g clip-path="url(#a)">
              <path
                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"
                fill="#B49A18"
              ></path>
            </g>
            <defs>
              <clipPath id="a">
                <path d="M0 0h48v48H0z" fill="#fff"></path>
              </clipPath>
            </defs>
          </svg>
        </div>
        <p
          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"
        >
          7.5 hrs
        </p>
      </div>
    </div>
  </div>
  <div
    class="flex h-[4.5rem] w-full flex-row items-center justify-center gap-[0.5rem]"
  >
    <div
      class="flex h-full w-[10rem] items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
    >
      <div
        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%]"
      >
        <svg
          viewBox="0 0 48 48"
          fill="none"
          height="48"
          width="48"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Z"
            stroke-width="3"
            stroke-linecap="round"
            stroke="#B49A18"
          ></path>
          <path
            d="M18.804 27a5.999 5.999 0 0 0 10.392 0"
            stroke-width="3"
            stroke-linecap="round"
            stroke="#B49A18"
          ></path>
          <path
            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"
            stroke-width=".25"
            stroke-linecap="round"
            stroke="#B49A18"
            fill="#B49A18"
          ></path>
        </svg>
      </div>

      <p
        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"
      >
        Happy
      </p>
    </div>
    <div
      class="flex h-full w-[6.5rem] items-center justify-center rounded-[1.5rem] bg-[#FFF599] relative group overflow-hidden"
    >
      <div
        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%]"
      >
        <svg
          viewBox="0 0 48 52"
          fill="none"
          height="52"
          width="48"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            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"
            stroke-width="3"
            stroke="#B49A18"
          ></path>
          <path
            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"
            stroke-width="3"
            stroke="#B49A18"
          ></path>
        </svg>
      </div>

      <p
        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"
      >
        1240cal
      </p>
    </div>
  </div>
  <div
    class="group relative flex h-[5em] w-full items-center justify-center overflow-hidden rounded-[1.5rem] bg-[#FFF599]"
  >
    <p
      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%]"
    >
      Today's Quote
    </p>
    <p
      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"
    >
      “The real workout starts when you want to stop.” – Ronnie Coleman
    </p>
  </div>
</div>

119 views

Copy to Figma

119 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.