Optimized for: Gemini / ChatGPT / Claude
Responsive Annual vs Monthly Toggle Pricing UI Prompt
Use this engineered prompt to drastically optimize your workflow and output.
Required Variables
- ✦
[DISCOUNT_PERCENTAGE] - ✦
[MONTHLY_RATES] - ✦
[YEARLY_RATES]
responsive-annual-monthly-toggle-pricing.txt
Generate a React-compatible Tailwind CSS pricing component featuring a functional Monthly/Yearly billing toggle. The toggle must include a smooth transition animation. Logic: If 'Yearly' is selected, display [YEARLY_RATES] and a 'Save [DISCOUNT_PERCENTAGE]' badge; if 'Monthly', show [MONTHLY_RATES]. The cards should include a glassmorphism effect using backdrop-blur and border-opacity. Ensure the layout handles variable feature list lengths gracefully without breaking alignment.
Example Output
"The AI provides a complete React component with useState hooks for toggling prices and sophisticated Tailwind classes for a frosted glass aesthetic."