Product Gallery 구성 요소
Glassmorphism 디자인 스타일의 반응형 제품 갤러리 구성 요소로, 흐림 효과와 어두운 테마를 지원하는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 제품 이미지와 사용자 아바타를 선보입니다.
HTML 코드
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="max-w-4xl w-full">
<h2 class="text-2xl font-bold text-center mb-6 dark:text-white">Product Gallery</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1 with details.</p>
<div class="mt-2 flex items-center">
<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-sm text-gray-600 dark:text-gray-400">By John Doe</span>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2 with details.</p>
<div class="mt-2 flex items-center">
<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-sm text-gray-600 dark:text-gray-400">By Jane Smith</span>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3 with details.</p>
<div class="mt-2 flex items-center">
<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-sm text-gray-600 dark:text-gray-400">By Mike Johnson</span>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4 with details.</p>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">By Sarah Connor</span>
</div>
</div>
</div>
</div>
</div>
</div>