구성 요소 제품 갤러리 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>

관련 구성 요소

Product Gallery 구성 요소

깊이를 위해 3D 요소로 디자인된 간단한 제품 갤러리 구성 요소로, 트라이어딕 색 구성표를 사용합니다. 반응형이며 작업이나 제품을 전시하는 데 적합한 어두운 테마를 지원합니다.

열다

Product Gallery 구성 요소

Material Design 스타일로 디자인된 제품 갤러리 구성 요소로, 트라이어딕 색 구성표가 있습니다. 그리드 기반 레이아웃, 반응형 애니메이션이 특징이며 어두운 테마를 지원합니다. 갤러리에는 이미지와 아바타가 포함되어 있으며 대시보드에 적합합니다.

열다

Product Gallery 구성 요소

다크 모드용으로 설계된 반응형 제품 갤러리 구성 요소로, Tailwind CSS를 사용하여 이미지와 아바타를 제공합니다.

열다