Product Gallery 구성 요소
레트로/빈티지 스타일의 반응형 제품 갤러리로, 보색 구성표가 특징이며 다크 모드를 지원하는 비즈니스/기업 웹사이트용으로 설계되었습니다.
HTML 코드
<div class="max-w-6xl mx-auto p-5">
<h2 class="text-3xl font-bold text-center text-amber-500">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 1</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$29.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 2</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$39.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 3</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$19.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 4</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$49.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 5</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$59.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 6</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$69.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>