Distance Metric Card with Team

<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">Distance</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-blue-600">
      <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
    </svg>
  </div>
  <p class="mt-3 text-2xl font-semibold tracking-tight">
    3.37
    <span class="ml-1 text-base font-medium text-stone-500">km</span>
  </p>
  <div class="mt-4 flex items-center justify-between">
    <div class="flex items-center gap-2">
      <img class="h-6 w-6 rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/eac34b73-c643-4433-82f0-5ec79e8f5fc9_320w.jpg" alt="">
      <img class="h-6 w-6 -ml-2 rounded-full object-cover ring-2 ring-white" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5c473785-e642-4d2f-8148-f2bfbb42dbf0_320w.jpg" alt="">
    </div>
    <button class="inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-medium bg-stone-900 text-stone-100 hover:bg-stone-800">
      Running
      <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-3 w-3">
        <path d="M5 12h14"></path>
        <path d="m12 5 7 7-7 7"></path>
      </svg>
    </button>
  </div>
</div>