Components Layout Components Dark Mode Layout Component

Dark Mode Layout Component

A responsive layout component with dark mode support using Tailwind CSS. Features a simple header, content area, and footer. Dark mode is handled by the `dark:` prefix in Tailwind classes.

Preview

HTML Code

<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>

Related Components

Layout Component

A responsive blog layout component designed with Material Design principles, using a monochromatic color scheme and supporting dark mode.

Open

Retro_Jewel_Tone_Entertainment_Layout

A moderate complexity retro/vintage inspired layout component for entertainment platforms, featuring rich jewel tones and full responsiveness with dark mode support.

Open

E-commerce Layout with 3D Design

A responsive web component layout for e-commerce with 3D design elements, incorporating a complementary color scheme and dark theme support. It features product cards, a navigation bar, and a footer, all styled with Tailwind CSS.

Open