Recipe

Deal Card

A premium pricing card with gradient accents, feature list, and a prominent CTA.

Pro

$29/mo

Everything you need to scale your workflow with advanced tools and priority support.

Unlimited projects
Priority support
Advanced analytics
Custom integrations
Team collaboration

No credit card required

Usage

Copy the card markup below. The gradient border effect uses a pseudo-element overlay. Swap the feature list array and pricing values to match your tiers.

<div className="relative max-w-sm rounded-2xl border
  border-zinc-800 bg-zinc-950 p-6">
  <div className="absolute inset-0 rounded-2xl
    bg-gradient-to-b from-[#8B5CF6]/10
    to-transparent" />
  <div className="relative">
    <span className="text-sm font-semibold uppercase
      tracking-widest text-[#8B5CF6]">
      Pro
    </span>
    <div className="mt-3 flex items-baseline gap-1">
      <span className="text-4xl font-bold">$29</span>
      <span className="text-zinc-500">/mo</span>
    </div>
    <p className="mt-2 text-sm text-zinc-400">
      Everything you need to scale.
    </p>
    <ul className="mt-6 space-y-3">
      {features.map((f) => (
        <li key={f}
          className="flex items-start gap-3
            text-sm text-zinc-300">
          <CheckIcon />
          {f}
        </li>
      ))}
    </ul>
    <button className="mt-8 w-full rounded-xl
      bg-gradient-to-r from-[#8B5CF6]
      to-[#F472B6] px-6 py-3 text-sm
      font-semibold text-white
      hover:opacity-90">
      Get started
    </button>
  </div>
</div>