Product Gallery 구성 요소
뉴모피즘 스타일과 트라이어딕 색 구성표로 설계된 반응형 제품 갤러리 구성 요소로, 어두운 테마를 지원하여 작업이나 제품을 전시하는 데 적합합니다.
HTML 코드
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg"> <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Product Gallery</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1012/300/200" alt="Product 1" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1013/300/200" alt="Product 2" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/women/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1014/300/200" alt="Product 3" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1015/300/200" alt="Product 4" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 4</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> </div></div>관련 구성 요소
Product Gallery 구성 요소
머티리얼 디자인(Material Design) 미학을 가미한 반응형 제품 갤러리 구성 요소로, 그리드 기반 레이아웃과 제품 또는 포트폴리오를 선보이는 데 적합한 대화형 요소를 특징으로 합니다. 다크 모드 지원이 포함되며 유사한 색 구성표를 사용합니다.
제품 갤러리 구성 요소 - Material Design
Material Design에서 영감을 받은 Product Gallery 구성 요소에는 반응형 디자인, 호버 효과 및 어두운 테마 지원이 포함되어 있습니다. Tailwind CSS를 사용합니다.
Product Gallery 구성 요소
깊이를 위해 3D 요소로 디자인된 간단한 제품 갤러리 구성 요소로, 트라이어딕 색 구성표를 사용합니다. 반응형이며 작업이나 제품을 전시하는 데 적합한 어두운 테마를 지원합니다.