Change plan

You are on Starter. Your billing period renews on 14 March, 18 days from now.

Due today

Team, 18 days remaining
$35.40
Unused time on Starter
−$11.40
Total
$24.00

Then $59.00 on 14 March, and monthly after that.

">

The prompt

Design a change-plan panel with Tailwind CSS for an in-app billing settings page. Use a max-w-2xl card. The header states "Change plan" with a muted line naming the current plan and renewal date. Below, three selectable plan rows as radio-style cards: each shows the plan name, a short line of positioning copy, the price on the right, and the current plan carries a "Current" pill while the selected one gets a neutral-900 ring and a filled radio dot. Under the list, a neutral-50 breakdown card titled "Due today" listing the new plan charge for the remaining period, an unused-time credit as a negative green line, and a bold total, followed by a muted line explaining the next full charge and its date. Close with a right-aligned pair of buttons, Cancel and a dark Confirm upgrade. Then add JavaScript that switches the selection styling and recalculates the proration figures from the days left in the billing period.

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