Flip card

/* Tailwind 3 has no 3D utilities, so the few 3D properties are arbitrary ones. */
import { Check, Star } from "lucide-react";

export function FlipCard() {
  const face = "absolute inset-0 flex flex-col justify-between rounded-xl p-[18px] [backface-visibility:hidden]";
  return (
    <button
      type="button"
      aria-label="Taste Pro, $24 a month. Shows what is included."
      className="group block h-44 w-full max-w-[280px] rounded-xl text-left [perspective:900px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
    >
      <span className="relative block h-full transition-transform duration-700 ease-taste [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] group-focus-visible:[transform:rotateY(180deg)] motion-reduce:transition-none">
        <span className={face + " bg-gradient-to-br from-primary to-info text-primary-fg shadow-xl"}>
          <span className="flex items-center justify-between font-medium">
            Taste Pro <Star className="size-[18px]" />
          </span>
          <span>
            <span className="block text-[34px] font-medium leading-tight tracking-tight">
              $24<span className="text-sm opacity-80"> / month</span>
            </span>
            <span className="text-[12.5px] opacity-80">Hover to see what’s in it</span>
          </span>
        </span>
        <span className={face + " border border-border bg-bg text-fg [transform:rotateY(180deg)]"}>
          <span className="font-medium">Everything in Pro</span>
          <span className="grid gap-1.5 text-[13.5px]">
            {["Unlimited projects", "Brand kit and tokens", "Priority support"].map((f) => (
              <span key={f} className="flex items-center gap-2"><Check className="size-[15px] text-success" />{f}</span>
            ))}
          </span>
          <span className="text-xs text-fg-subtle">Cancel any time</span>
        </span>
      </span>
    </button>
  );
}