Product Gallery 구성 요소
소셜 미디어에 적합한 파스텔 색 구성표와 함께 잔인함 스타일로 디자인된 반응형 제품 갤러리 구성 요소입니다. 높은 대비, 대담한 디자인 요소가 특징이며 다크 모드에 최적화되어 있습니다.
HTML 코드
<div class="max-w-4xl mx-auto p-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-pastel-yellow rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-green rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-purple rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-orange rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-pink rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-teal rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
</div>
</div>