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>관련 구성 요소
Columns 구성 요소
블로그 또는 콘텐츠 소비를 위해 설계된 반응형 Columns 구성 요소입니다. 유사한 색 구성표와 어두운 테마 지원이 있는 미니멀한 플랫 디자인이 특징입니다.
Columns 구성 요소
Columns Component(대시보드의 구성 요소)는 보색이 있는 3D 디자인을 특징으로 합니다. 여기에는 간단한 레이아웃, 다크 모드 지원이 있는 3개의 반응형 열이 포함되어 있으며 스타일링에 Tailwind CSS를 사용합니다. JavaScript는 포함되어 있지 않습니다.
Columns 구성 요소
Glassmorphism 스타일, 트라이어드 색 구성표, 비즈니스/기업 목적을 위한 단순 복잡성 수준을 갖춘 반응형 열 구성 요소에는 다크 모드 지원이 포함됩니다.