Composant de mise en page en mode sombre
Un composant de mise en page réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Comprend un en-tête, une zone de contenu et un pied de page simples. Le mode sombre est géré par le préfixe 'dark :' dans les classes Tailwind.
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>© 2023 My Website</p>
</div>
</footer>
</div>Composants associés
Composants de mise en page Composant 40
Un composant de mise en page réactif avec des micro-interactions avec des animations attrayantes. Il comprend une structure de carte avec des interactions utilisateur telles que des effets de survol, une mise à l’échelle et des ajustements de thème sombre.
Mise en page du portefeuille en mode sombre
Un composant de mise en page réactif en mode sombre pour les portfolios, avec une palette de couleurs monochromatiques à l’aide de Tailwind CSS. Inclut des espaces réservés pour le contenu et est conçu pour une complexité modérée sans JavaScript.
Mise en page RetroBlog
Une mise en page de blog simple et réactive avec une esthétique rétro/vintage, la prise en charge du mode sombre et une palette de couleurs complémentaire, construite avec Tailwind CSS.