Build this UI: pricing cards
Three plans side by side, with the most popular one highlighted.
intermediateHTML & CSS
The task
Style the three pricing plans to match the demo:
- Cards sit side by side on wide screens and wrap on small ones (Grid with
auto-fit). - Each card: plan name, a big price, a list of features with ✓, and a button at the bottom (buttons line up even when lists have different lengths).
- The Pro plan is highlighted: brand-colour border, a "Most popular" badge, and a filled button.
What you'll build
The finished result. Try it out, then build it yourself below.
Demo · drag the bottom edge to make it taller