Compass/web/components/widgets/gradient-container.tsx

import clsx from 'clsx'

/** container with a gradient border  */
export function GradientContainer(props: {children: React.ReactNode; className?: string}) {
  const {children, className} = props
  return (
    <div
      className={clsx(
        'to-primary-400 relative rounded-lg bg-gradient-to-r from-pink-300 via-purple-300 p-1 py-1 shadow-lg shadow-fuchsia-300/50',
        className,
      )}
    >
      <div className="bg-canvas-0 w-full rounded p-3 ">{children}</div>
    </div>
  )
}