Tailwind CSS 4 レイアウトデモ

Flexbox レイアウト

Box 1
Box 2
Box 3
レスポンシブ 1
レスポンシブ 2

Grid レイアウト

Grid 1
Grid 2
Grid 3
Grid 4
Grid 5 (span)
Grid 6

Position レイアウト

Absolute Top-Left
Absolute Top-Right
Absolute Bottom-Left
Absolute Bottom-Right

Margin & Padding

Margin 4, Padding 4
Margin X 6, Padding X 6, Y 2
Margin Top 8, Bottom 2, Padding 8

Overflow

これは縦のスクロールが必要な長いテキストです。これは縦のスクロールが必要な長いテキストです。これは縦のスクロールが必要な長いテキストです。これは縦のスクロールが必要な長いテキストです。これは縦のスクロールが必要な長いテキストです。

これは横のスクロールが必要な長いコンテンツです。

レスポンシブ (md: lg: xl:)

モバイルのみ表示