Turn a UI screenshot into working frontend code

Here's a screenshot of a pricing card component from a SaaS landing page. Build this as React with Tailwind CSS code.

Match, don't reinterpret:
1. Layout structure — what's in a row vs. stacked, alignment, relative spacing — as closely as the screenshot actually shows it, not the layout you'd typically expect for a component like this.
2. Every visible text label, exactly as written, including button text, placeholder text, and any small print — don't paraphrase a label into something that sounds cleaner.
3. Visible states — if a button looks disabled or active, a field looks focused, or there's a badge or count shown, include that state in the code. Don't drop it for being "just a detail"; a visible state in a screenshot is a spec for that state, not decoration.
4. Colors and type choices close to what's shown; use our existing shadcn/ui theme tokens tokens or variables if the screenshot maps onto one, otherwise use plain values and say explicitly that you did.

CONSTRAINTS
no external icon libraries, use inline SVG only; must be a single component file

Where the screenshot is ambiguous — a cut-off edge, an icon you're not fully sure of, a hover or focus state you can't see because it isn't visible in a static image — say plainly what's ambiguous and what assumption you made, instead of silently inventing a specific value and presenting it as if it came from the screenshot.

RESPONSIVE BEHAVIOR
A single screenshot only shows one viewport width. Build the component to behave reasonably at other sizes using ordinary responsive patterns, but say explicitly that you're extrapolating beyond what the screenshot actually shows for anything narrower or wider than the captured width — don't present a guessed mobile layout as if it were derived from evidence in the image.

ACCESSIBILITY BASICS
Even though a screenshot can't show what's in the accessibility tree, apply ordinary baseline practice regardless: real button/link elements instead of divs with click handlers, an alt attribute placeholder on any image, and a visible focus state even where the screenshot doesn't show one being triggered. Note this is a baseline addition, not something read directly off the image.

IF THE SCREENSHOT SHOWS AN INTERACTION MID-FLOW
If the screenshot appears to capture a transient state — a dropdown open, a toast notification visible, a modal mid-animation — build both the resting state and the captured state as two distinct states of the same component, rather than building only what's shown and leaving the resting state unaddressed.

NAMING AND FILE STRUCTURE
Name the component after what it is, not after the file it came from or a generic placeholder like Component1. If the screenshot clearly shows a piece of a larger page rather than a self-contained widget, say so, and note what surrounding layout context this piece would need once it's placed back into a real page rather than pretending it's fully self-sufficient in isolation.

OUTPUT
a single component file plus a one-line list of anything you were unsure about