제품 카드 구성 요소
파스텔 색조의 미니멀한 스타일로 디자인된 반응형 제품 카드 구성 요소로, 비즈니스 또는 기업 웹 사이트에 적합하며 다크 모드 지원이 포함되어 있습니다.
HTML 코드
<div class="container mx-auto p-6">
<h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Product Cards</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/203" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>