Компонент "Колонны"
Компонент Columns в стиле Material Design с адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS.
HTML-код
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Column 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is the content for column 1. It uses Material Design principles for styling and responsiveness.</p>
</div>
<!-- Column 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is the content for column 2. The columns are responsive, adapting to different screen sizes.</p>
</div>
<!-- Column 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is the content for column 3. Dark mode is supported, changing the background and text colors.</p>
</div>
</div>
</div>Связанные компоненты
Playful_Documentation_Columns_Component
Игривый и красочный компонент документации/вики-колонок с закатными/теплыми тонами, округлыми элементами и поддержкой темного режима. Разработано для быстрого отклика на всех устройствах.
Luxury_Job_Board_Columns_Component
Роскошный/премиальный, монохроматический компонент колонны для досок объявлений о вакансиях и платформ для карьерного роста. Он отличается утонченным дизайном с элегантной типографикой, богатыми элементами интерфейса, полной отзывчивостью и поддержкой темных режимов.
Retro_Industrial_Columns_Component
Сложный, яркий, выполненный в ретро/винтажном стиле колонны для производственных и промышленных компаний, выполненный в стиле 80-х/90-х годов, с поддержкой темного режима и полной отзывчивостью.