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 원칙에서 영감을 받은 트라이어딕 색 구성표를 특징으로 합니다. 사용자 기본 설정에 대한 어두운 테마가 포함되어 있으며 그리드 기반 레이아웃을 사용합니다.