Active Time Progress Stat Card

<div
  class="ring-1 ring-stone-200 w-44 h-44 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-5 pr-5 pb-5 pl-5">
  <div class="flex items-center justify-between">
    <p class="text-sm font-medium text-stone-500">Active</p>
    <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="zap"
      class="lucide lucide-zap h-4 w-4 text-yellow-600">
      <path
        d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
      </path>
    </svg>
  </div>
  <p class="mt-3 text-2xl font-semibold tracking-tight">
    58<span class="ml-1 text-base font-medium text-stone-500">min</span></p>
  <div class="mt-3 flex items-center gap-2">
    <div class="flex-1 h-2 overflow-hidden rounded-full bg-stone-200">
      <div class="h-full rounded-full bg-gradient-to-r from-yellow-400 to-orange-500" style="width: 97%"></div>
    </div>
    <p class="text-xs font-medium text-stone-600">97%</p>
  </div>
  <p class="mt-2 text-xs text-stone-500">Goal: 60 min</p>
</div>