Nutrition Summary Card with Progress Indicators

<article
  class="ring-1 ring-stone-200 h-80 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-4 flex items-start justify-between">
    <div class="">
      <h2 class="text-xl font-semibold tracking-tight">Nutrition</h2>
      <p class="text-sm text-stone-500">Today's intake</p>
    </div>
    <button class="rounded-xl p-2 text-stone-500 hover:bg-stone-50">
                <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="utensils" class="lucide lucide-utensils h-5 w-5"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path><path d="M7 2v20"></path><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path></svg>
              </button>
  </div>

  <div class="space-y-4">
    <div class="text-center">
      <div class="relative mx-auto h-24 w-24">
        <div
          class="absolute inset-0 rounded-full bg-[conic-gradient(var(--tw-gradient-stops))] from-green-400 via-yellow-400 to-red-400">
        </div>
        <div class="absolute inset-2 rounded-full bg-white"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="text-center">
            <p class="text-lg font-semibold tracking-tight">1,420</p>
            <p class="text-xs text-stone-500">kcal</p>
          </div>
        </div>
      </div>
      <p class="mt-2 text-sm text-stone-500">680 kcal remaining</p>
    </div>

    <div class="grid grid-cols-3 gap-3 text-center">
      <div class="rounded-2xl p-3 ring-1 bg-red-50 ring-red-200">
        <div class="h-2 w-full overflow-hidden rounded-full bg-red-200 mb-2">
          <div class="h-full rounded-full bg-red-400" style="width: 65%"></div>
        </div>
        <p class="text-xs font-medium text-red-600">Carbs</p>
        <p class="text-sm font-semibold">178g</p>
      </div>
      <div class="rounded-2xl p-3 ring-1 bg-blue-50 ring-blue-200">
        <div class="h-2 w-full overflow-hidden rounded-full bg-blue-200 mb-2">
          <div class="h-full rounded-full bg-blue-400" style="width: 80%"></div>
        </div>
        <p class="text-xs font-medium text-blue-600">Protein</p>
        <p class="text-sm font-semibold">92g</p>
      </div>
      <div class="rounded-2xl p-3 ring-1 bg-yellow-50 ring-yellow-200">
        <div class="h-2 w-full overflow-hidden rounded-full bg-yellow-200 mb-2">
          <div class="h-full rounded-full bg-yellow-400" style="width: 45%"></div>
        </div>
        <p class="text-xs font-medium text-yellow-600">Fats</p>
        <p class="text-sm font-semibold">38g</p>
      </div>
    </div>
  </div>
</article>