Inverting Stat Cards

// Four stat cards on a light grey band that turn black on hover.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Stat = { value: string; label: string };

type Props = {
  heading?: string;
  stats?: Stat[];
};

const DEFAULT_STATS: Stat[] = [
  { value: "12", label: "Courts, indoor and outdoor" },
  { value: "650+", label: "Members of every level" },
  { value: "18", label: "Certified coaches" },
  { value: "40", label: "Years of club history" },
];

export default function InvertStatCards({ heading = "A club built around the game", stats = DEFAULT_STATS }: Props) {
  return (
    <section className="bg-[#f3f3f3] px-4 py-20 font-['Inter',ui-sans-serif,system-ui,sans-serif] text-black antialiased md:px-8 md:py-36 lg:px-12">
      <div className="mx-auto max-w-7xl">
        <h2 className="mb-10 max-w-2xl text-4xl font-medium md:mb-14 md:text-6xl">{heading}</h2>
        <div className="grid grid-cols-2 gap-3 md:gap-5 lg:grid-cols-4">
          {stats.map((stat) => (
            <div key={stat.label} className="group flex min-h-44 flex-col justify-between rounded-2xl bg-white p-6 transition-colors duration-500 hover:bg-black hover:text-white md:min-h-60 md:p-8">
              <span className="text-5xl tabular-nums md:text-7xl">{stat.value}</span>
              <p className="mt-6 text-sm text-[#404040] transition-colors duration-500 group-hover:text-white/70 md:text-base">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}