Practice & Assessment
Test your understanding of Component Patterns and UI Building
Multiple Choice Questions
5Why is focus:ring-2 focus:ring-offset-2 important on buttons?
What does line-clamp-2 do in Tailwind?
Which class prevents a flex child from shrinking below its natural size?
What z-index stacking does a modal backdrop and dialog need?
What color pattern creates accessible soft badge colors in Tailwind?
Coding Challenges
1Build a contact form with Tailwind — all states included
Create a contact form with 4 fields: Name (text), Email (email), Subject (select with 3 options), Message (textarea, 5 rows). Requirements: visible label above each field, vertical spacing with space-y-4, default state uses gray borders, a second Email field showing error state (red border, error message below), submit button (full-width, blue, hover and focus states). Expected: clean form with both normal and error states visible simultaneously. Time estimate: 20-25 minutes.
Mini Project
SaaS Pricing Page Components
Build a complete pricing page with three tiers using all component patterns from this module. Requirements: page heading and subheading centered at top; three pricing cards in a horizontal grid (featured Pro tier with elevated styling, badge, dark background); each card has plan name, price with billing period, 5-item feature list with checkmark icons, and a CTA button; below pricing, an FAQ section with 4 question-answer pairs in a two-column grid; each FAQ item is a card with question header and answer body. Use the badge pattern for Most Popular label. All buttons need complete hover and focus states.