Компонент "Колонны"
Адаптивный компонент Columns, разработанный в соответствии с принципами Material Design, использующий Tailwind CSS для стилизации, поддержки темных тем и адаптивной анимации.
HTML-код
<div class="container mx-auto px-4">
<h2 class="text-2xl font-bold my-6 text-gray-800 dark:text-gray-200">Columns Component</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 1</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 2</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the second column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 3</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the third column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 4</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the fourth column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=5" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 5</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the fifth column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=6" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 6</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the sixth column. It can contain any content.</p>
</div>
</div>
</div>
Связанные компоненты
Компонент "Колонны"
Компонент столбцов для приборной панели, отличающийся 3D-дизайном с дополнительными цветами. Он включает в себя три адаптивные колонки с простой версткой, поддержкой темного режима и использует Tailwind CSS для стилизации. JavaScript не включен.
Колонны компонента 49
Адаптивный компонент Columns со скевоморфным дизайном, имитирующим элементы реального мира, с поддержкой темных тем и использованием Tailwind CSS.
Компонент "Колонны"
Адаптивный компонент столбцов, разработанный с использованием стекломорфизма, с использованием триадической цветовой схемы для бизнес/корпоративного веб-сайта. Он отличается полупрозрачными элементами, похожими на матовое стекло, эффектами размытия, подходит для темного режима.