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>
관련 구성 요소
Neumorphism Gallery 구성 요소
다크 모드를 지원하는 반응형 Neumorphic 갤러리 구성 요소입니다. 이미지는 picsum.photos의 자리 표시자와 randomuser.me 의 아바타입니다.
갤러리 구성 요소
Tailwind CSS를 사용하는 간단한 갤러리 구성 요소로, 트라이어딕 색 구성표로 Brutalism 디자인 스타일을 구현하고 작업 또는 제품을 선보이기 위한 어두운 테마 지원을 구현합니다.