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

Columns 구성 요소

3D 디자인 요소와 어두운 테마가 있는 반응형 열 구성 요소는 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column one. It includes engaging content about the service or feature.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column two. Showcase your content effectively with appealing design.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column three. Engage your users with powerful imagery and text.</p>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Columns 구성 요소

어스 톤의 브루탈리즘 스타일로 디자인된 반응형 Columns Component는 전자 상거래에 적합하며 중간 수준의 복잡성과 어두운 테마를 지원합니다.

열다

Columns 구성 요소

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

열다

Columns 구성 요소 Neumorphism

Columns Component Neumorphism 컬럼 컴포넌트 뉴모피즘 - 미묘한 그림자를 사용하여 배경에서 돌출된 것처럼 보이는 요소를 만드는 소프트 UI 스타일입니다. 이 구성 요소는 반응형이며 어두운 테마를 지원합니다. JavaScript 코드가 필요하지 않습니다. 다크 모드의 경우 CSS 지원으로 충분합니다.

열다