Daily Activity Progress Card

<article class="ring-1 ring-stone-200 h-[580px] flex flex-col shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] bg-white rounded-3xl pt-6 pr-6 pb-6 pl-6">
            <div class="mb-5 flex items-start justify-between">
              <div class="">
                <h2 class="text-xl md:text-2xl font-semibold tracking-tight">Daily Activity</h2>
                <p class="text-sm text-stone-500">Mon 17 — Sun 23</p>
              </div>
              <button class="rounded-xl p-2 text-stone-500 ring-1 ring-transparent hover:bg-stone-50 hover:ring-stone-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal h-5 w-5"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
              </button>
            </div>

            <div class="mb-6 grid grid-cols-7 gap-2 text-center text-xs font-medium text-stone-600">
              <div class="rounded-xl px-3 py-2 bg-stone-900 text-stone-100">
                <p class="font-medium">Mon</p>
                <p class="mt-0.5 text-sm font-semibold tracking-tight">17</p>
              </div>
              <div class="rounded-xl px-3 py-2 ring-1 bg-stone-50 ring-stone-200">
                <p class="">Tue</p><p class="mt-0.5 font-medium">18</p>
              </div>
              <div class="rounded-xl px-3 py-2 ring-1 bg-stone-50 ring-stone-200">
                <p class="">Wed</p><p class="mt-0.5 font-medium">19</p>
              </div>
              <div class="rounded-xl px-3 py-2 ring-1 bg-stone-50 ring-stone-200">
                <p class="">Thu</p><p class="mt-0.5 font-medium">20</p>
              </div>
              <div class="rounded-xl px-3 py-2 ring-1 bg-stone-50 ring-stone-200">
                <p>Fri</p><p class="mt-0.5 font-medium">21</p>
              </div>
              <div class="rounded-xl px-3 py-2 ring-1 bg-stone-50 ring-stone-200">
                <p>Sat</p><p class="mt-0.5 font-medium">22</p>
              </div>
              <div class="rounded-xl px-3 py-2 ring-1 bg-stone-50 ring-stone-200">
                <p>Sun</p><p class="mt-0.5 font-medium">23</p>
              </div>
            </div>

            <div class="flex-1 space-y-3">
              <!-- Steps -->
              <div class="flex items-center gap-4 rounded-2xl p-4 ring-1 bg-stone-50 ring-stone-200">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100 text-amber-700">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="footprints" class="lucide lucide-footprints h-5 w-5"><path d="M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z"></path><path d="M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z"></path><path d="M16 17h4"></path><path d="M4 13h4"></path></svg>
                </div>
                <div class="flex-1">
                  <div class="flex items-center justify-between text-sm">
                    <p class="font-medium">Steps</p>
                    <p class="text-stone-500">Completed</p>
                  </div>
                  <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-stone-200">
                    <div class="h-full rounded-full bg-gradient-to-r to-orange-500 from-amber-400" style="width: 100%"></div>
                  </div>
                  <p class="mt-1 text-xs text-stone-500">22,000 / 22,000</p>
                </div>
                <p class="text-sm font-medium">100%</p>
              </div>
              <!-- Calories -->
              <div class="flex items-center gap-4 rounded-2xl p-4 ring-1 bg-stone-50 ring-stone-200">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-100 text-rose-600">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="flame" class="lucide lucide-flame h-5 w-5"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>
                </div>
                <div class="flex-1">
                  <div class="flex items-center justify-between text-sm">
                    <p class="font-medium">Calories</p>
                    <p class="text-stone-500">In Progress</p>
                  </div>
                  <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-stone-200">
                    <div class="h-full rounded-full bg-gradient-to-r to-pink-500 from-rose-400" style="width: 85%"></div>
                  </div>
                  <p class="mt-1 text-xs text-stone-500">1,420 / 1,680 cal</p>
                </div>
                <p class="text-sm font-medium">85%</p>
              </div>
              <!-- Water -->
              <div class="flex items-center gap-4 rounded-2xl p-4 ring-1 bg-stone-50 ring-stone-200">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="droplets" class="lucide lucide-droplets h-5 w-5"><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"></path><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"></path></svg>
                </div>
                <div class="flex-1">
                  <div class="flex items-center justify-between text-sm">
                    <p class="font-medium">Water</p>
                    <p class="text-stone-500">In Progress</p>
                  </div>
                  <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-stone-200">
                    <div class="h-full rounded-full bg-gradient-to-r to-cyan-500 from-blue-400" style="width: 73%"></div>
                  </div>
                  <p class="mt-1 text-xs text-stone-500">2.2 / 3 L</p>
                </div>
                <p class="text-sm font-medium">73%</p>
              </div>
              <!-- Meditation -->
              <div class="flex items-center gap-4 rounded-2xl p-4 ring-1 bg-stone-50 ring-stone-200">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="brain" class="lucide lucide-brain h-5 w-5"><path d="M12 18V5"></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"></path><path d="M18 18a4 4 0 0 0 2-7.464"></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"></path><path d="M6 18a4 4 0 0 1-2-7.464"></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"></path></svg>
                </div>
                <div class="flex-1">
                  <div class="flex items-center justify-between text-sm">
                    <p class="font-medium">Meditation</p>
                    <p class="text-stone-500">Pending</p>
                  </div>
                  <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-stone-200">
                    <div class="h-full rounded-full bg-gradient-to-r to-green-500 from-emerald-400" style="width: 0%"></div>
                  </div>
                  <p class="mt-1 text-xs text-stone-500">0 / 15 min</p>
                </div>
                <p class="text-sm font-medium">0%</p>
              </div>
            </div>
          </article>