コンポーネント レイアウトコンポーネント ダークモードレイアウトコンポーネント

ダークモードレイアウトコンポーネント

Tailwind CSS を使用したダーク モードをサポートするレスポンシブ レイアウト コンポーネント。シンプルなヘッダー、コンテンツエリア、フッターが特徴です。ダークモードは、Tailwindクラスの「dark:」プレフィックスによって処理されます。

プレビュー

HTMLコード

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
  <header class="bg-white dark:bg-gray-800 shadow">
    <div class="container mx-auto px-4 py-4">
      <h1 class="text-xl font-bold">My Website</h1>
    </div>
  </header>
  <main class="container mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
      <h2 class="text-lg font-semibold mb-4">Welcome</h2>
      <p>This is a basic layout component with dark mode.</p>
    </div>
  </main>
  <footer class="bg-white dark:bg-gray-800 shadow mt-8">
    <div class="container mx-auto px-4 py-4 text-center">
      <p>&copy; 2023 My Website</p>
    </div>
  </footer>
</div>

関連コンポーネント

トライアド 3D ビジネス レイアウト コンポーネント

ビジネス/企業のWebサイト向けの適度な複雑さのレイアウトコンポーネントで、トライアドの配色と奥行きのある3Dデザイン要素を備え、完全な応答性とダークモードのサポートを備えています。

開ける

レトロなソーシャルメディアレイアウト

ソーシャルメディア用のシンプルな単色のレトロなテーマのレイアウトで、ダークモードがサポートされています。

開ける

レトロビジネスレイアウト

レトロ/ヴィンテージをテーマにしたビジネスWebサイト用のレイアウトコンポーネントで、グレースケールの配色とシンプルなデザインが特徴です。応答性が高く、ダークモードのサポートが含まれています。

開ける