HTML 代码
<div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="absolute top-4 right-4 bg-blue-500 text-white dark:bg-blue-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">New</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Skeuomorphic Gadget Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Experience the future with this innovative gadget featuring realistic textures and interactions.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$249.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
Add to Cart
</button>
</div>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>In Stock: <span class="font-semibold">15</span></p>
<p>Shipping: <span class="font-semibold">Free</span></p>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="absolute top-4 right-4 bg-green-500 text-white dark:bg-green-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">-20%</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Classic Audio Interface</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the nostalgia with this classic audio interface, meticulously crafted with skeuomorphic elements.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$199.00</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
Add to Cart
</button>
</div>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>In Stock: <span class="font-semibold">8</span></p>
<p>Shipping: <span class="font-semibold">$9.99</span></p>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="absolute top-4 right-4 bg-yellow-500 text-gray-800 dark:bg-yellow-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">Limited</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Camera Lens</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Capture moments with this vintage-inspired lens, designed with a focus on realistic visual depth.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$349.50</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
Add to Cart
</button>
</div>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>In Stock: <span class="font-semibold">3</span></p>
<p>Shipping: <span class="font-semibold">$4.99</span></p>
</div>
</div>
</div>
</div>
</div>