Weight Tracking Stat Card with Background Image

<article
  class="overflow-hidden h-80 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-center text-stone-100 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f3e4ed66-8b4b-4d7a-b556-68b4b142faae_800w.jpg)] bg-cover rounded-3xl pt-6 pr-6 pb-6 pl-6"
  style="">
  <div class="mb-4 flex items-start justify-between">
    <div class="">
      <h2 class="text-xl font-semibold tracking-tight">Body Weight</h2>
      <p class="text-sm text-stone-300">72 kg target</p>
    </div>
    <button class="rounded-xl p-2 text-stone-300 hover:bg-stone-700/40">
      <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="ellipsis" class="lucide lucide-ellipsis 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">
    <p class="text-3xl font-semibold tracking-tight">73.2 kg</p>
    <p class="text-sm text-stone-300 mt-1">Current weight</p>
  </div>

  <div class="space-y-3">
    <div class="flex items-center justify-between text-sm">
      <span class="text-stone-300">Weekly change</span>
      <span class="text-emerald-400 font-medium">-0.8 kg</span>
    </div>
    <div class="flex items-center justify-between text-sm">
      <span class="text-stone-300">Monthly change</span>
      <span class="text-emerald-400 font-medium">-2.6 kg</span>
    </div>

  </div>

  <div class="mt-6 pt-4 border-t border-stone-700/40">
    <div class="grid grid-cols-3 gap-3 text-center text-xs">
      <div class="">
        <p class="text-stone-400">Last week</p>
        <p class="font-semibold text-white">74.0 kg</p>
      </div>
      <div>
        <p class="text-stone-400">Last month</p>
        <p class="font-semibold text-white">75.8 kg</p>
      </div>
      <div>
        <p class="text-stone-400">Start</p>
        <p class="font-semibold text-white">78.5 kg</p>
      </div>
    </div>
  </div>
</article>