Metric Card

<div class="bg-white/95 backdrop-blur-sm rounded-2xl p-6 text-center shadow-sm border border-gray-100">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&display=swap');
    .font-sans { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
    .font-serif-news { font-family: 'Newsreader', ui-serif, Georgia, serif; }</style>
  <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600
    rounded-full flex items-center justify-center mb-4 mx-auto">
    <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="w-6 h-6 text-white">
      <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="text-3xl font-bold text-stone-900 font-serif-news mb-2">15 sec</p>
  <p class="text-sm font-semibold text-stone-700 mb-1">Average Response Time</p>
  <p class="text-xs text-stone-500">Down from 6 hours</p>
</div>