Gradient Border Card

export function GradientBorderCard() {
  return (
    <div className="relative w-64 overflow-hidden rounded-2xl p-px">
      <div
        aria-hidden="true"
        className="absolute -inset-1/2 motion-safe:[animation:spin_6s_linear_infinite]"
        style={{
          background:
            "conic-gradient(from 0deg, transparent 0%, rgb(245 158 11) 18%, transparent 36%)",
        }}
      />
      <div className="relative rounded-[calc(1rem+5px)] bg-neutral-900 p-6">
        <h3 className="text-sm font-semibold text-neutral-50">
          Gradient border
        </h3>
        <p className="mt-1 text-xs text-neutral-400">
          A beam circles the card's edge — pure CSS, one conic gradient.
        </p>
      </div>
    </div>
  );
}