CCHub Logo CCHub Tailwind Collection
Komponenten Layout-Komponenten Layout-Komponente im Dunkelmodus

Layout-Komponente im Dunkelmodus

Eine reaktionsschnelle Layoutkomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Verfügt über eine einfache Kopfzeile, einen Inhaltsbereich und eine Fußzeile. Der Dunkelmodus wird in Tailwind-Klassen durch das Präfix 'dark:' behandelt.

Vorschau

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>

Verwandte Komponenten

Komponente "Layout-Komponenten"

Ein responsives Webkomponenten-Layout nach Material Design-Prinzipien für eine Social-Media-Anwendung mit Unterstützung für dunkle Themen.

Offen

Minimalistische Blog-Layout-Komponente

Minimalistische Blog-Layout-Komponente mit monochromatischem Farbschema für den Konsum von Inhalten, reaktionsschnell und mit Unterstützung für dunkle Themen.

Offen

Komponente "Layout-Komponenten"

Eine Layout-Komponente, die in einem skeuomorphen Stil gestaltet ist, der reale Gegenstücke nachahmt, mit responsiven Elementen und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen