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

Columns 구성 요소

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

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid gap-8 md:grid-cols-3">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Sales Overview</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Visualize your sales performance with key metrics.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Customer Insights</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Understand your customer base and their behavior.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Graph Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-teal-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Product Performance</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Monitor the performance of your products.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Data Placeholder</p>
        </div>
      </div>
    </div>

  </div>
</div>

관련 구성 요소

Luxury_Dating_Columns_Component

데이트/소셜 플랫폼을 위한 단순하고 우아한 3열 레이아웃 구성 요소로, 검은색, 흰색 및 강조 색상 팔레트, 완전한 응답성 및 다크 모드 지원으로 고급스러운 미학을 특징으로 합니다.

열다

3D_Vibrant_Columns_Component

문서 및 Wiki 사이트에 적합한 복잡하고 생동감 넘치는 반응형 3D 스타일 열 구성 요소로, 다크 모드 지원, 미묘한 애니메이션 및 시맨틱 HTML을 제공합니다.

열다

Columns 구성 요소

소셜 네트워킹 인터페이스를 위해 설계된 회색조 색 구성표가 있는 미니멀리스트 열 구성 요소입니다. 어두운 테마를 지원하는 반응형 레이아웃이 특징입니다.

열다