live
6 components
PricingCard.tsx
interface PricingCardProps {
  title: string
  price: number
  features: string[]
}

export default function PricingCard(
  { title, price, features }
) {
  return (
    <div className="rounded-xl p-6
      border border-zinc-200 bg-white">
      <h3>{title}</h3>
      <span>
        ${price}
        <span>/mo</span>
      </span>
      <ul>
        {features.map(f => (
          <li key={f}>{f}</li>
        ))}
      </ul>
      <button>get started</button>
    </div>
  )
}
⚡
component·PricingCard.tsx

Pro Plan

popular
$29/mo