Product Gallery 구성 요소
Material Design 스타일로 디자인된 제품 갤러리 구성 요소로, 트라이어딕 색 구성표가 있습니다. 그리드 기반 레이아웃, 반응형 애니메이션이 특징이며 어두운 테마를 지원합니다. 갤러리에는 이미지와 아바타가 포함되어 있으며 대시보드에 적합합니다.
HTML 코드
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 1. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 2. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image 3" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 3. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product Image 4" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 4. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product Image 5" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 5</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 5. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
Product Gallery 구성 요소
미묘한 마이크로 인터랙션, 파스텔 색상 구성표 및 완전한 다크 모드 지원으로 설계된 복잡하고 반응이 빠른 제품 갤러리 구성 요소로, 포럼 또는 커뮤니티 플랫폼에 적합합니다. 대화형 이미지 선택 및 자세한 제품 정보를 제공합니다.
Product Gallery 구성 요소
Material Design 원칙을 기반으로 하는 Product Gallery 구성 요소로, 반응형 디자인과 어두운 테마 지원을 제공합니다. 자리 표시자 이미지를 포함합니다.
Product Gallery 구성 요소
머티리얼 디자인(Material Design) 원칙에 따라 설계된 간단한 반응형 제품 갤러리 구성 요소로, 대시보드에 적합한 생생한 색상과 다크 모드 지원을 특징으로 합니다. 이 구성 요소는 스타일링에 Tailwind CSS를 사용합니다.