Componente Layout modalità scura
Un componente di layout reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Presenta un'intestazione, un'area del contenuto e un piè di pagina semplici. La modalità oscura è gestita dal prefisso 'dark:' nelle classi Tailwind.
Codice 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>© 2023 My Website</p>
</div>
</footer>
</div>Componenti correlati
Componente Componenti di layout
Un componente web reattivo progettato con uno stile scheumorfico, caratterizzato da una combinazione di colori monocromatica per siti web aziendali/aziendali. Include elementi interattivi per un'interfaccia ricca e supporta la modalità oscura.
Componente Componenti di layout
Un componente di layout ispirato al brutalismo per il consumo di contenuti con una combinazione di colori pastello e una complessità moderata, con design reattivo e supporto per la modalità oscura.
Componente Componenti di layout
Un componente di layout del portfolio reattivo con un'estetica di design retrò/vintage, che utilizza una combinazione di colori analoga e progettato per una complessità media con funzionalità interattive per mostrare lavori o prodotti.