Компонент макета «Темный режим»
Адаптивный компонент верстки с поддержкой темного режима с использованием Tailwind CSS. Имеет простой верхний колонтитул, область содержимого и нижний колонтитул. Темный режим обрабатывается префиксом 'dark:' в классах Tailwind.
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>Связанные компоненты
Компоненты макета Компонент
Адаптивный компонент макета панели мониторинга с темной темой, боковой панелью и областью основного содержимого. Для визуальной привлекательности используется триадическая цветовая гамма.
Компоненты макета Компонент
Компонент макета, выполненный в скевоморфном стиле, который имитирует реальные аналоги, с адаптивными элементами и поддержкой темных тем с использованием Tailwind CSS.
Glassmorphism_Social_Media_Layout_Component
Сложный, отзывчивый компонент макета для социальных сетей с дизайном стекломорфизма с матовыми полупрозрачными элементами, эффектами размытия и дополнительной цветовой схемой. Включает боковую панель, область основного содержимого и правую боковую панель, все с поддержкой темного режима.