Product Gallery 구성 요소
레트로/빈티지 미학을 가미한 반응형 제품 갤러리로, 다크 모드를 지원합니다. 여기에는 플레이스홀더 서비스에서 생성된 이미지와 아바타가 포함됩니다.
HTML 코드
<div class="max-w-7xl mx-auto p-8">
<h2 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Retro Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
Product Gallery 구성 요소
Material Design 스타일로 디자인된 제품 갤러리 구성 요소로, 트라이어딕 색 구성표가 있습니다. 그리드 기반 레이아웃, 반응형 애니메이션이 특징이며 어두운 테마를 지원합니다. 갤러리에는 이미지와 아바타가 포함되어 있으며 대시보드에 적합합니다.
Product Gallery 구성 요소
머티리얼 디자인(Material Design) 미학을 가미한 반응형 제품 갤러리 구성 요소로, 그리드 기반 레이아웃과 제품 또는 포트폴리오를 선보이는 데 적합한 대화형 요소를 특징으로 합니다. 다크 모드 지원이 포함되며 유사한 색 구성표를 사용합니다.