CCHub Logo CCHub Tailwind Collection
구성 요소 제품 갤러리 Product Gallery 구성 요소

Product Gallery 구성 요소

microinteractions가 있는 제품 갤러리 구성 요소입니다.

미리 보기

HTML 코드 


<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="-m-1 flex flex-wrap md:-m-2">
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=1" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=2" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=3" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=4" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=5" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=6" />
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Brutalist_RealEstate_Product_Gallery

부동산 리스팅을 위한 복잡하고 브루탈리즘 스타일의 제품 갤러리 구성 요소로, 보석 색조, 풍부한 채도가 높은 색상, 고대비 및 다크 모드 지원을 특징으로 합니다. 여러 대화형 요소로 속성 세부 정보를 표시하도록 설계되었습니다.

열다

Product Gallery 구성 요소

종이/인쇄물에서 영감을 받은 복잡한 제품 갤러리 구성 요소로, 보색이 적용되어 블로그와 같은 콘텐츠 소비를 위해 설계되었으며, 풍부한 세부 정보, 응답성 및 다크 모드 지원을 제공합니다.

열다

Product Gallery 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 제품 갤러리 구성 요소로, 대시보드에 적합하고 다크 모드를 지원하는 어스 톤 색상을 특징으로 합니다.

열다