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

Columns 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Material Design 스타일의 Columns Component입니다.

미리 보기

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">
    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 1</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 1. It uses Material Design principles for styling and responsiveness.</p>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 2</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 2. The columns are responsive, adapting to different screen sizes.</p>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 3</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 3. Dark mode is supported, changing the background and text colors.</p>
    </div>
  </div>
</div>

관련 구성 요소

Columns 구성 요소

Columns Component(대시보드의 구성 요소)는 보색이 있는 3D 디자인을 특징으로 합니다. 여기에는 간단한 레이아웃, 다크 모드 지원이 있는 3개의 반응형 열이 포함되어 있으며 스타일링에 Tailwind CSS를 사용합니다. JavaScript는 포함되어 있지 않습니다.

열다

Columns 구성 요소

블로그 또는 콘텐츠 소비를 위해 설계된 반응형 Columns 구성 요소입니다. 유사한 색 구성표와 어두운 테마 지원이 있는 미니멀한 플랫 디자인이 특징입니다.

열다

Columns 구성 요소

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

열다