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

갤러리 구성 요소

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>

관련 구성 요소

갤러리 구성 요소

머티리얼 디자인 스타일의 Tailwind CSS를 사용하는 반응형 갤러리 구성 요소로, 어두운 테마를 지원하는 대시보드에 적합합니다.

열다

Neumorphism Gallery 구성 요소

다크 모드를 지원하는 반응형 Neumorphic 갤러리 구성 요소입니다. 이미지는 picsum.photos의 자리 표시자와 randomuser.me 의 아바타입니다.

열다

갤러리 구성 요소

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

열다