Three common UI patterns, each built two ways — hand-written CSS Grid/Flexbox vs. Tailwind utility classes — to show the same result from two different workflows. Resize the window to see the breakpoints kick in live.
Desktop
1. Auto-Reflowing Grid
A grid that reflows column count on its own — no media queries needed. Built with repeat(auto-fill, minmax()).
01
02
03
04
05
06
2. Pricing Cards
Same three-tier layout, toggle between the vanilla CSS version and the Tailwind utility version.
Starter
$9/mo
1 project
Community support
Basic analytics
Pro
$29/mo
Unlimited projects
Priority support
Advanced analytics
Team
$79/mo
Everything in Pro
5 team seats
Custom roles
Starter
$9/mo
1 project
Community support
Basic analytics
Popular
Pro
$29/mo
Unlimited projects
Priority support
Advanced analytics
Team
$79/mo
Everything in Pro
5 team seats
Custom roles
3. Responsive Nav Bar
Collapses into a stacked mobile layout under 640px. Toggle between approaches below.