Performance Metrics Feature Card

<article class="group relative bg-neutral-900 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 w-full max-w-xl">
  <div class="flex items-center justify-between">
    <h3 class="text-white text-lg sm:text-xl tracking-tight font-medium font-geist" style="">Performance-first Websites
    </h3>
    <span class="text-[11px] text-neutral-300 font-geist" style="">Lighthouse</span>
  </div>
  <p class="mt-2 text-sm text-neutral-300 font-geist" style="">Ship fast sites with impeccable Core Web Vitals and SEO.
  </p>

  <div class="mt-5 grid grid-cols-3 gap-4">
    <div class="flex flex-col items-center gap-2">
      <div class="relative h-14 w-14 rounded-full p-[2px]"
        style="background-image: conic-gradient(#10b981 99%, rgba(255,255,255,.08) 0)">
        <div class="absolute inset-0.5 rounded-full bg-neutral-900"></div>
        <div
          class="absolute inset-2 rounded-full bg-neutral-950 flex items-center justify-center text-sm font-semibold text-emerald-400 font-geist"
          style="">99</div>
      </div>
      <span class="text-[11px] text-neutral-300 font-geist" style="">Performance</span>
    </div>
    <div class="flex flex-col items-center gap-2">
      <div class="relative h-14 w-14 rounded-full p-[2px]"
        style="background-image: conic-gradient(#10b981 100%, rgba(255,255,255,.08) 0)">
        <div class="absolute inset-0.5 rounded-full bg-neutral-900"></div>
        <div
          class="absolute inset-2 rounded-full bg-neutral-950 flex items-center justify-center text-sm font-semibold text-emerald-400 font-geist"
          style="">100</div>
      </div>
      <span class="text-[11px] text-neutral-300 font-geist" style="">Best Practices</span>
    </div>
    <div class="flex flex-col items-center gap-2">
      <div class="relative h-14 w-14 rounded-full p-[2px]"
        style="background-image: conic-gradient(#10b981 98%, rgba(255,255,255,.08) 0)">
        <div class="absolute inset-0.5 rounded-full bg-neutral-900"></div>
        <div
          class="absolute inset-2 rounded-full bg-neutral-950 flex items-center justify-center text-sm font-semibold text-emerald-400 font-geist"
          style="">98</div>
      </div>
      <span class="text-[11px] text-neutral-300 font-geist" style="">SEO</span>
    </div>
  </div>

  <div class="mt-5 flex items-center justify-between">
    <span class="inline-flex items-center gap-2 text-[11px] text-indigo-200 bg-indigo-500/10 rounded-full px-2 py-1 ring-1 ring-indigo-400/20 font-geist" style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket w-[14px] h-[14px]" data-lucide="chart-bar" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(199, 210, 254);"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M7 16h8" class=""></path><path d="M7 11h12" class=""></path><path d="M7 6h3" class=""></path></svg>
              Edge-optimized
            </span>
    <a href="#work"
      class="text-sm text-white/90 hover:text-white underline underline-offset-4 decoration-white/30 font-geist"
      style="">See examples</a>
  </div>
</article>