Columns 구성 요소
레트로/빈티지 미학으로 디자인된 반응형 Columns 구성 요소로, 밝은 테마와 어두운 테마를 모두 지원합니다. 각각 picsum.photos 및 randomuser.me 의 자리 표시자 이미지와 아바타가 있습니다.
HTML 코드
<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>