Pricing Card

<div className="flex flex-col rounded-2xl border
  bg-white shadow-lg overflow-hidden">

  {/* Gradient Header */}
  <div className="flex flex-col items-center gap-2
    bg-gradient-to-br from-emerald-500 to-teal-600
    px-6 py-8 text-white">
    <span className="text-sm uppercase tracking-widest
      font-semibold opacity-80">
      Pro Plan
    </span>
    <div className="flex items-baseline gap-1">
      <span className="text-5xl font-extrabold">$29</span>
      <span className="text-lg opacity-70">/mo</span>
    </div>
  </div>

  {/* Feature List */}
  <div className="flex flex-col gap-4 px-6 py-6">
    <ul className="flex flex-col gap-3">
      {features.map((f) => (
        <li className="flex items-center gap-3 text-sm">
          <CheckIcon className="text-emerald-500" />
          {f}
        </li>
      ))}
    </ul>

    <button className="w-full rounded-lg bg-emerald-500
      py-3 text-white font-bold hover:bg-emerald-600">
      Get Started
    </button>
  </div>
</div>