From screenshot to shipped in one review

The prompt

Create a two-column hero with Tailwind CSS: marketing copy on the left, an interactive before/after comparison on the right. The copy column has an eyebrow, a tight headline, a supporting paragraph, a dark CTA plus a ghost secondary button, and a small line of proof. The comparison column is a relative 4:3 rounded panel with overflow-hidden and select-none. Inside it, layer a polished "after" mock on neutral-900 (a header row, a chart block, three metric tiles) as the base, then an absolutely positioned "before" layer clipped by its own width holding a drab neutral-100 version of the same mock; each layer carries its own small corner label. Over both, a full-height drag handle: a thin white rule with a round shadowed grip, positioned by inline left percentage, and reachable by keyboard as a button. Then add JavaScript that sizes the inner "before" mock to the panel width so it never reflows while clipped, updates the clip width and handle position from pointer events while dragging (pointer capture so the drag survives leaving the panel), moves the divider 5% per arrow-key press when the grip is focused, clamps the value between 0 and 100, and re-measures on resize.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? Open the Tailwind source.