Tailwind CSS Layout Playground

Classroom Examples

1. Flex Direction

flex-row

1
2
3

flex-row-reverse

1
2
3

flex-col

1
2
3

flex-col-reverse

1
2
3

2. Flex Wrap

flex-wrap

1
2
3
4
5
6
7
8
9
10
6
7
8
9
10

flex-nowrap

1
2
3
4
5
6
7
8
9
10
7
8
9
10

3. Grid Columns

grid-cols-1

1
2
3
4
5
6

grid-cols-2

1
2
3
4
5
6

grid-cols-3

1
2
3
4
5
6

grid-cols-4

1
2
3
4
5
6

grid-cols-12

1
2
3
4
5
6
7
8
9
10
11
12

4. Grid Span

col-span-2
3
4
col-span-full

5. Grid Rows

Home loans done better for you

row-span-3

6. Gap

7. Position

Absolute
Bottom
Relative
Absolute
Bottom
Relative
Absolute
Bottom
Relative
Sticky

8. Object Position

9. Z Index

z-10
z-20
z-50

10. Overflow

Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden

11. Space Between

1
2
3
A
B
C