Tailwind CSS v4.1 デモページ（静的HTML）

このページは、Tailwind CSS v4.1と.enhanced-designクラスの動作を確認するための静的HTMLページです。

基本的なTailwind CSSコンポーネント

カードコンポーネント

これは基本的なカードコンポーネントです。shadow、rounded、paddingが適用されています。

ボタンバリエーション

グリッドレイアウト

グリッドアイテム 1

レスポンシブグリッドの例

グリッドアイテム 2

モバイルでは1列表示

グリッドアイテム 3

デスクトップでは3列表示

フォームコンポーネント

enhanced-designクラスのテスト

以下のセクションでは、.enhanced-designクラスを使用して、基本的なHTML要素に自動スタイルが適用されることを確認します。

見出し1 - enhanced-design内

見出し2 - enhanced-design内

見出し3 - enhanced-design内

これはenhanced-designクラス内の段落です。基本的なHTML要素に自動的にスタイルが適用されます。イタリックや太字も含まれています。

  • 順序なしリストアイテム1
  • 順序なしリストアイテム2
  • 順序なしリストアイテム3
  1. 順序付きリストアイテム1
  2. 順序付きリストアイテム2
  3. 順序付きリストアイテム3
これは引用ブロックです。enhanced-designクラス内では自動的にスタイルが適用されます。
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3
データ4 データ5 データ6

Tailwind CSSのユーティリティクラス

カラーパレット

Red 500
Blue 500
Green 500
Yellow 500
Purple 500
Pink 500
Gray 500
Indigo 500

スペーシング

Padding 2 (0.5rem)
Padding 4 (1rem)
Padding 6 (1.5rem)
Padding 8 (2rem)

フレックスボックス

左寄せ
中央
右寄せ

アニメーション効果

ホバーで拡大
ホバーで回転
ホバーで不透明度変更

レスポンシブデザインのテスト

画面サイズに応じた表示

ブラウザの幅を変更して確認してください

📱 モバイル (< 640px)