Card One
On mobile this is one column.
Tailwind CSS
Visual Crash Course
This page shows what Tailwind utility classes do visually. Open this file in a browser, then inspect the HTML when you want to connect each visual result to its class names.
Margin
Margin creates space outside an element.
No extra margin
Margin on all sides
Large margin on top
Margin on the left
Padding
Padding creates space inside an element.
Small padding
Medium padding
Large padding
Text Colors
Text utilities change color and visual emphasis.
Dark slate text
Blue text
Green text
Rose text
Background Colors
Background utilities color the element surface.
Dark background
Blue background
Amber background
Green background
Text Size
Text size utilities make headings and labels scale quickly.
Small text for captions
Base text for paragraphs
Large text for subheadings
Big heading text
Hero text
Flexbox
Flex utilities line items up horizontally or vertically.
Items in a row with a gap
One
Two
Three
Centered with Flexbox
Centered
Navbar-style spacing
Logo
Home
Work
Contact
Grid
Grid utilities create repeated columns and card layouts.
Card Two
On medium screens this becomes two columns.
Card Three
On large screens this becomes three columns.
Responsive Prefixes
Resize your browser to see this section change. Tailwind can apply different styles at different screen widths.
Mobile blue, tablet green, desktop rose
Mini Page Example
This combines spacing, color, flex, and grid in one small layout.
JW Design & Digital
Work
About
Contact
Portfolio
Clean websites with practical structure.
A compact section showing how Tailwind builds a real interface quickly.
Tile