제품 카드 구성 요소
그레이스케일 색 구성표와 어두운 테마를 지원하는 반응형 디자인을 사용하여 Material Design 스타일로 디자인된 간단한 전자 상거래 제품 카드 구성 요소입니다.
HTML 코드
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>