Tailwind CSS Playground
0px / 0px
Responsive Breakpoint Indicators
xs: <640px (red) — visible only on the smallest screens
sm: ≥640px (orange) — disappears at ≥768px
md: ≥768px (yellow) — disappears at ≥1024px
lg: ≥1024px (green) — disappears at ≥1280px
xl: ≥1280px (blue) — disappears at ≥1536px
2xl: ≥1536px (purple) — only visible on very wide screens
Typography
Heading 1 (4xl, extrabold)
Heading 2 (3xl, bold)
Heading 3 (2xl, semibold)
Heading 4 (xl, medium)
This is a standard paragraph. Tailwind makes it easy to control text styling. You can adjust font size, weight, color, and more with utility classes.
This is a small, italic paragraph with a muted color.
This is a link- List item 1
- List item 2
- Nested item A
- Nested item B
Flexbox & Grid
Flexbox
Flex Item 1
Flex Item 2
Flex Item 3
Grid
Grid Cell 1
Grid Cell 2
Grid Cell 3
Grid Cell 4 (spans 2 columns on sm+)
Grid Cell 5
Form Elements
Components
Card Title
This is a simple card component. It has an image, a title, some text, and a button.
Info:This is an informational alert.
Warning:Something might require your attention.
Danger:There was a critical error!
Color Palette
red-500
orange-500
yellow-400
green-500
teal-500
cyan-500
blue-500
indigo-500
purple-600
pink-500
gray-400
gray-800