Card React com Tailwind

interface CardProps {
  title: string
  description: string
  badge?: string
  onClick?: () => void
}

export function Card({ title, description, badge, onClick }: CardProps) {
  return (
    <div
      onClick={onClick}
      className="group relative rounded-2xl p-5 cursor-pointer
        bg-white/[0.03] border border-white/[0.08]
        hover:border-purple-500/25 transition-all duration-300
        hover:shadow-[0_0_24px_rgba(139,92,246,0.12),0_0_48px_rgba(139,92,246,0.06)]"
    >
      {badge && (
        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full
          text-xs font-medium bg-purple-500/10 text-purple-300
          border border-purple-500/20 mb-3">
          {badge}
        </span>
      )}
      <h3 className="text-base font-semibold text-white mb-1.5 leading-snug">
        {title}
      </h3>
      <p className="text-sm text-white/45 leading-relaxed line-clamp-2">
        {description}
      </p>
    </div>
  )
}