Pricing 72 block design & features
Built with shadcn/ui, this pricing block arranges two plan cards in a grid where the second card shifts upward by a few rems on medium screens, producing a staggered overlap that draws the eye to the recommended tier. A Tabs component above the cards lets visitors switch between monthly and yearly billing, with the price figures updating immediately. Each card displays the plan name, large price, short description, a feature checklist with Check icons, and a call-to-action button.
The highlighted card uses a thicker primary border and a subtle shadow to reinforce the visual hierarchy created by the vertical offset. On narrower viewports the cards stack normally so the offset disappears gracefully, keeping the layout clean on mobile without any horizontal overflow.
This pattern works well when you want to suggest a preferred plan without relying on badges or background tints. The vertical displacement is a lightweight cue that communicates importance through spatial positioning alone.