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.
HTML Code
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200 mb-8">Retro Columns</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Random placeholder image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 1</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel risus vitae nisl euismod aliquam.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-gray-200">John Doe</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Random placeholder image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 2</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-gray-200">Jane Doe</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Random placeholder image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 3</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-gray-200">John Smith</p>
</div>
</div>
</div>
</div>
</div>