CCHub Logo CCHub Tailwind Collection
구성 요소 갤러리 갤러리 구성 요소

갤러리 구성 요소

비즈니스/기업 웹사이트용으로 설계된 단순하고 반응이 빠른 이미지 갤러리 구성 요소로, Material Design 원칙에서 영감을 받은 트라이어딕 색 구성표를 특징으로 합니다. 사용자 기본 설정에 대한 어두운 테마가 포함되어 있으며 그리드 기반 레이아웃을 사용합니다.

미리 보기

HTML 코드 

<div class="bg-blue-50 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-200 mb-8">Our Work</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-2">Project Alpha</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Alpha, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-red-700 dark:text-red-300 mb-2">Project Beta</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Beta, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-green-700 dark:text-green-300 mb-2">Project Gamma</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Gamma, highlighting its key features and success.</p>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

갤러리 구성 요소

레트로/빈티지에서 영감을 받은 갤러리 구성 요소로, 생생한 색 구성표, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 제공합니다. 콘텐츠 소비를 위해 설계되었습니다.

열다

갤러리 구성 요소

Tailwind CSS를 사용하는 간단한 갤러리 구성 요소로, 트라이어딕 색 구성표로 Brutalism 디자인 스타일을 구현하고 작업 또는 제품을 선보이기 위한 어두운 테마 지원을 구현합니다.

열다

Brutalist Gallery 구성 요소

엔터테인먼트 플랫폼을 위한 반응형의 브루탈리즘에서 영감을 받은 갤러리 구성 요소로, 고대비, 쿨 뉴트럴 및 다크 모드 지원을 특징으로 합니다.

열다