Heart Rate Progress Card

<div class="ring-1 ring-stone-200 h-44 bg-white rounded-3xl p-5 shadow-sm">
  <div class="flex items-center justify-between">
    <p class="text-sm font-medium text-stone-500">Heart Rate</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" class="h-4 w-4 text-rose-500">
      <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path>
    </svg>
  </div>
  <div class="mt-4 flex items-center justify-center">
    <div class="relative h-24 w-24">
      <div class="absolute inset-0 rounded-full bg-[conic-gradient(var(--tw-gradient-stops))] from-rose-400 via-orange-300 to-amber-400"></div>
      <div class="absolute inset-1 rounded-full bg-white"></div>
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="text-center">
          <p class="text-xl font-semibold tracking-tight">120</p>
          <p class="text-xs text-stone-500">BPM</p>
        </div>
      </div>
    </div>
  </div>
</div>