전자상거래 제품 갤러리
복잡하고 반응이 빠르며 어두운 테마와 호환되는 갤러리 구성 요소로, 미니멀한 디자인, 보색적인 색 구성표, 전자 상거래에 적합한 여러 인터랙티브 요소가 있습니다.
HTML 코드
<div class="dark:bg-gray-900 dark:text-white min-h-screen">
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-center mb-8">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Product Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Category</span>
<span>In Stock</span>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Product Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$29.50</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Category</span>
<span>In Stock</span>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Product Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$45.00</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Category</span>
<span>Out of Stock</span>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Product Title 4</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$15.75</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Category</span>
<span>In Stock</span>
</div>
</div>
</div>
<!-- Add more product cards as needed -->
</div>
<!-- Pagination/Load More (Example) -->
<div class="flex justify-center mt-8">
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white px-6 py-3 rounded-md hover:bg-gray-400 dark:hover:bg-gray-600">Load More</button>
</div>
</div>
</div>