Labelled Stats With Dividers

const stats = [
  { value: "£4.2m", label: "Revenue processed", detail: "for customers last quarter" },
  { value: "26", label: "Countries served", detail: "across four continents" },
  { value: "180k", label: "Hours saved", detail: "through automation" },
];

export default function StatsLabelledDividers() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-5xl rounded-3xl border border-zinc-200 bg-zinc-50 px-8 py-12 shadow-sm dark:border-zinc-800 dark:bg-zinc-900/50 md:px-14">
        <div className="mx-auto max-w-xl text-center">
          <h2 className="text-2xl font-bold tracking-tight text-zinc-900 sm:text-3xl dark:text-white">
            Trusted where the numbers matter
          </h2>
          <p className="mt-3 text-zinc-600 dark:text-zinc-400">
            A snapshot of what our platform delivered over the past ninety days.
          </p>
        </div>

        <dl className="mt-12 grid grid-cols-1 divide-y divide-zinc-200 sm:grid-cols-3 sm:divide-x sm:divide-y-0 dark:divide-zinc-800">
          {stats.map((stat) => (
            <div key={stat.label} className="flex flex-col items-center px-6 py-6 text-center">
              <dt className="text-sm font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                {stat.label}
              </dt>
              <dd className="mt-2 text-5xl font-bold tracking-tight text-zinc-900 dark:text-white">
                {stat.value}
              </dd>
              <p className="mt-2 text-sm text-zinc-500 dark:text-zinc-500">{stat.detail}</p>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}