AI Prompt to Turn a Design Screenshot into a React Component

ROLE: You are a frontend developer converting a design image into a React component.

CONTEXT: I'm attaching a design screenshot of a pricing card. Tech stack: React 18, Tailwind CSS, no component library.

TASK:

1. First, describe what you see in the image: overall layout, spacing, typography, colors, and any visible interactive states
2. Flag anything you're uncertain about
3. Then write the React component matching this description, split into: component structure (JSX), styling, and any props needed

CONSTRAINTS:

• Match the layout and spacing as closely as possible
• Use Tailwind CSS only, no inline styles
• Make the component accept props for plan name, price, features list, and CTA button text

OUTPUT FORMAT:

1. A short description of the design
2. The complete component code in a fenced code block
3. A one-line note on anything that will need visual verification

Design description: A vertically-stacked pricing card with rounded corners and a subtle shadow. Plan name in bold at the top, a large price below it, a bulleted feature list with checkmark icons, and a full-width button at the bottom. Uncertain: exact shade of the accent color used for the checkmarks and button — approximated as a medium blue.

function PricingCard({ planName, price, features, ctaText, onSelect }) {
  return (
    <div className="rounded-2xl shadow-md p-6 max-w-sm bg-white">
      <h3 className="text-lg font-bold text-gray-900">{planName}</h3>
      <p className="text-3xl font-extrabold mt-2">{price}</p>
      <ul className="mt-4 space-y-2">
        {features.map((feature) => (
          <li key={feature} className="flex items-center gap-2 text-sm text-gray-700">
            <span className="text-blue-600">&#10003;</span>
            {feature}
          </li>
        ))}
      </ul>
      <button
        onClick={onSelect}
        className="mt-6 w-full rounded-lg bg-blue-600 py-2 text-white font-semibold"
      >
        {ctaText}
      </button>
    </div>
  );
}

Note: verify the exact accent blue against the original design once rendered — it was approximated from a compressed screenshot.