Practice & Assessment
Test your understanding of Tailwind Fundamentals
Multiple Choice Questions
5What does the Tailwind class p-4 compile to in CSS?
Which Tailwind class produces font-weight: 700?
How do you apply a hover background color in Tailwind?
Which setup is appropriate for a production Tailwind project?
What is the purpose of the group class in Tailwind?
Coding Challenges
1Build a styled profile card using only Tailwind utilities
Create an HTML file with a centered profile card. Include: a round avatar placeholder (80x80px, gray background), name (bold, large), job title (smaller, muted text), and a Follow button (blue, white text, hover darkens). Use only Tailwind classes — no custom CSS. Card needs white background, subtle shadow, rounded corners, comfortable padding. Expected: polished card in browser. Time estimate: 15-20 minutes.
Mini Project
Developer Bio Page
Build a single-page developer bio using only Tailwind utility classes. Include: centered hero with name, title, short bio; skills section with at least 5 badge-style tags; contact section with email and GitHub links with hover color changes. Apply consistent typography scale, use Tailwind color palette throughout, ensure all interactive elements have visible hover and focus states. No custom CSS allowed.