CCHub Logo CCHub Tailwind Collection
구성 요소 열 열 구성 요소 49

열 구성 요소 49

실제 요소를 모방한 스큐어모픽 디자인의 반응형 Columns Component로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="container mx-auto px-4 py-8">
    <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 border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=1" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column One</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the first column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=2" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Two</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the second column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=3" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Three</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the third column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Columns 구성 요소

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

열다

Playful_Documentation_Columns_Component

장난스럽고 다채로운 문서/위키 칼럼 구성 요소로, 일몰/따뜻한 톤, 둥근 요소, 다크 모드를 지원합니다. 모든 장치에서 응답성을 제공하도록 설계되었습니다.

열다

Columns 구성 요소

Glassmorphism으로 설계된 반응형 Columns Component로, 비즈니스/기업 웹 사이트에 Triadic 색 구성표를 사용합니다. 젖빛 유리와 같은 반투명 요소, 흐림 효과가 특징이며 다크 모드에 적합합니다.

열다