Gradient Border CSS Rounded Cards With Padding Box Trick

// Rounded gradient borders with one element each: solid fill clipped to padding-box over a gradient clipped to border-box.
const cards = [
  { title: "Glaze chemistry", meta: "6 weeks, Mondays", body: "Mix and test your own stoneware glazes, from celadon to tenmoku.", grad: "linear-gradient(135deg,#f97316,#ec4899)", radius: "12px" },
  { title: "Throwing large forms", meta: "4 weeks, Wednesdays", body: "Centre ten kilos of clay and pull walls for planters and jars.", grad: "linear-gradient(135deg,#14b8a6,#6366f1)", radius: "24px" },
  { title: "Raku firing day", meta: "1 day, Saturday", body: "Pull glowing pots from the kiln and smoke them in sawdust.", grad: "linear-gradient(135deg,#eab308,#16a34a)", radius: "36px" },
];

export default function GradientBorderCssRoundedCardsWithPaddingBoxTrick() {
  return (
    <section className="bg-stone-100 px-5 py-16">
      <div className="mx-auto max-w-5xl">
        <h2 className="text-center text-2xl font-semibold tracking-tight text-stone-900">Courses starting in March</h2>
        <p className="mt-2 text-center text-sm text-stone-600">Same border trick on three radii: 12, 24 and 36 pixels.</p>
        <ul className="mt-10 grid gap-5 sm:grid-cols-3">
          {cards.map((c) => (
            <li
              key={c.title}
              className="border-2 border-transparent p-6"
              style={{ borderRadius: c.radius, background: `linear-gradient(#fff,#fff) padding-box, ${c.grad} border-box` }}
            >
              <p className="text-xs font-semibold uppercase tracking-wider text-stone-500">{c.meta}</p>
              <h3 className="mt-2 text-lg font-semibold text-stone-900">{c.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-stone-600">{c.body}</p>
              <a href="#" className="mt-5 inline-flex min-h-[40px] items-center text-sm font-semibold text-stone-900 underline decoration-stone-300 underline-offset-4 hover:decoration-stone-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-900">
                Reserve a place
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}