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
Layout retrò per i social media
Un layout semplice e monocromatico a tema retrò per i social media, con supporto per la modalità oscura.
Layout aziendale di Glassmorphism
Un componente di layout glassmorphism semplice e reattivo con supporto per la modalità oscura utilizzando Tailwind CSS, con toni della terra.
Componente di layout del blog minimalista
Componente di layout del blog minimalista con combinazione di colori monocromatica per il consumo di contenuti, reattivo e con supporto per temi scuri.