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

Columns 구성 요소

반응형 3D 스타일의 그레이스케일 열로 포트폴리오 페이지를 만들 수 있으며, 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<section class="py-10 dark:bg-gray-900">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 1</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project one, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 2</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project two, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 3</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project three, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
    </div>
  </div>
</section>

관련 구성 요소

Columns 구성 요소

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

열다

Columns 구성 요소

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

열다

Playful_Documentation_Columns_Component

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

열다