Columns Component
A responsive Columns Component designed with Material Design principles, utilizing Tailwind CSS for styling, dark theme support, and responsive animations.
HTML Code
<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>
Related Components
Columns Component Neumorphism
Columns Component Neumorphism - A soft UI style that creates elements appearing to extrude from the background using subtle shadows. this component is responsive and have dark theme support. No JavaScript code is needed. For dark mode, CSS support is sufficient.
Retro_Industrial_Columns_Component
A complex, vibrant, retro/vintage-styled columns component for manufacturing/industrial companies, featuring an 80s/90s aesthetic with dark mode support and full responsiveness.
Columns Component
A responsive Columns Component designed in a Brutalist style with Earth tones, tailored for e-commerce, featuring medium complexity and dark theme support.