갤러리 구성 요소
블로그/콘텐츠 목적을 위해 흙색을 사용한 Neumorphism 스타일의 갤러리 구성 요소. 이 구성 요소는 여러 대화형 요소, 반응형 디자인 및 어두운 테마 지원이 포함된 풍부한 인터페이스를 제공합니다.
HTML 코드
<div class="container mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg"> <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Gallery</h1> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 1</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 2</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 3</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=4" alt="Gallery Image 4" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 4</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=5" alt="Gallery Image 5" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 5</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=6" alt="Gallery Image 6" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 6</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> </div> <div class="mt-6 text-center"> <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300">Author</h3> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="mx-auto rounded-full w-24 h-24"> <p class="text-gray-600 dark:text-gray-400">Author Name</p> </div></div>관련 구성 요소
갤러리 구성 요소
비즈니스/기업 웹사이트용으로 설계된 단순하고 반응이 빠른 이미지 갤러리 구성 요소로, Material Design 원칙에서 영감을 받은 트라이어딕 색 구성표를 특징으로 합니다. 사용자 기본 설정에 대한 어두운 테마가 포함되어 있으며 그리드 기반 레이아웃을 사용합니다.