Columns Component
A responsive columns component with 3D design elements and dark theme support using Tailwind CSS.
HTML Code
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
<img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a description for column one. It includes engaging content about the service or feature.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
<img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">This is a description for column two. Showcase your content effectively with appealing design.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
<img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">This is a description for column three. Engage your users with powerful imagery and text.</p>
</div>
</div>
</div>
</div>
Related Components
Luxury_Job_Board_Columns_Component
A luxury/premium, monochromatic column component for job boards and career development platforms. It features a sophisticated design with elegant typography, rich interface elements, full responsiveness, and dark mode support.
Columns Component
A responsive Columns Component designed with a Retro/Vintage aesthetic, supporting both light and dark themes. Features placeholder images and avatars from picsum.photos and randomuser.me respectively.
Playful_Documentation_Columns_Component
A playful and colorful documentation/wiki columns component with sunset/warm tones, rounded elements, and dark mode support. Designed for responsiveness across all devices.