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

Retro-Layout für soziale Medien

Ein einfaches, monochromes Retro-Layout für soziale Medien mit Unterstützung für den Dunkelmodus.

Offen

Portfolio-Layout im Dunkelmodus

Eine responsive Layout-Komponente im Dunkelmodus für Portfolios mit einem monochromatischen Farbschema unter Verwendung von Tailwind CSS. Enthält Platzhalter für Inhalte und ist für moderate Komplexität ohne JavaScript ausgelegt.

Offen

Layout-Komponenten

Eine reaktionsschnelle Dashboard-Layout-Komponente, die Mikrointeraktionen und ein Pastellfarbschema nutzt und für die Anzeige von Datenvisualisierungs- und Bedienfeldern mit Unterstützung des Dunkelmodus entwickelt wurde.

Offen