구성 요소 갤러리 갤러리 구성 요소

갤러리 구성 요소

3D 디자인, 유사한 색 구성표 및 소셜 미디어 인터페이스를 위한 다크 모드를 지원하는 반응형 갤러리 구성 요소.

미리 보기

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">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=1"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=2"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=3"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=4"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=5"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=6"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

갤러리 구성 요소

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

열다

갤러리 구성 요소

Material Design에서 대시보드 용도로 유사한 색 구성표를 사용하여 디자인된 반응형 갤러리 구성 요소입니다.

열다

갤러리 구성 요소

미니멀한 플랫 디자인의 반응형 갤러리 구성 요소로, Tailwind CSS를 사용하여 이미지와 어두운 테마를 지원합니다.

열다