Componente de diseño de modo oscuro
Un componente de diseño responsivo con soporte de modo oscuro mediante Tailwind CSS. Cuenta con un encabezado, un área de contenido y un pie de página simples. El modo oscuro se maneja mediante el prefijo 'dark:' en las clases de Tailwind.
Código 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>Componentes relacionados
Diseño del panel de control de Glassmorphism
Un componente de diseño de tablero de vidrio complejo de color triádico con una barra lateral, un área de contenido principal y múltiples paneles translúcidos, totalmente receptivo y con soporte para modo oscuro. Diseñado para visualización de datos y paneles de control.
Componente Componentes de diseño
Un componente de diseño de tablero receptivo con estilo Glassmorphism, combinación de colores vibrantes y compatibilidad con temas oscuros mediante Tailwind CSS. Cuenta con una barra lateral y un área de contenido principal con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque.
Retro_Jewel_Tone_Entertainment_Layout
Un componente de diseño de inspiración retro/vintage de complejidad moderada para plataformas de entretenimiento, con ricos tonos joya y capacidad de respuesta total con soporte para modo oscuro.