Lesson
cards-surfaces
This lesson teaches Cards and surfaces—the ideas, syntax, and habits you need before moving on in Tailwind CSS.
Config-driven utilities are how most greenfield product CSS is written today.
You will apply Cards and surfaces in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.
Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.
When the previous lesson's MCQs feel easy and you can explain Cards and surfaces in your own words.
Cards bundle spacing, border, shadow, and radius utilities into a repeatable visual language:
rounded-xl border border-slate-200 bg-white p-6 shadow-sm ring-1 ring-slate-900/5
Layer dark:bg-slate-900 dark:border-slate-700 dark:text-slate-100 when darkMode: 'class' is configured. Surfaces should lift from the page background in both themes.
Can you explain this lesson in 30 seconds without reading notes?
Not saved yet.
Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.
Multiple choice — immediate feedback.
Past discussion is visible to everyone. Only logged-in users can post comments and replies.
Starter discussion topics
Sign up or log in to post comments and sync lesson progress across devices.
No discussion yet. Be the first to ask a question.