Tailwind-Powered Pricing Component with Annual/Monthly Toggle Animation
Project Context
Hey devs! Just finished coding up a SaaS pricing section using HTML, Tailwind CSS, and Alpine.js for the state management. The component features three distinct tier cards and a smooth sliding toggle switch at the top to flip between monthly and annual pricing (which applies a 20% discount badge).
Feedback Requested
1. Toggle Transition: The toggle switch uses a CSS transition property to slide the background pill. Does the slide animation feel crisp (around 200ms), or should I speed it up? 2. Discount Prominence: Is the '20% Off' badge eye-catching enough, or does it blend too much into the background colors? 3. Layout Breakpoints: When scaling down to a tablet portrait layout, the cards stack vertically quite early. Would a horizontal scrolling carousel look better for mobile viewports?
Critique Feed Thread
No layout critiques added yet. Be the first to blueprint logic!