Product Cards 组件
一个简单的电子商务产品卡组件，以 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>