野兽派产品卡
用于电子商务的简单交互式产品卡组件，具有灰度的粗野主义设计。它具有产品图片、标题、价格和“添加到购物车”按钮。该组件响应迅速，并支持深色模式。包含悬停效果以实现交互性。
HTML 代码
<div class="dark:bg-gray-900 bg-gray-100 p-4 font-mono antialiased flex items-center justify-center min-h-screen">
<div class="relative dark:bg-black bg-white border-2 border-black dark:border-white w-full max-w-sm mx-auto shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
<div class="overflow-hidden border-b-2 border-black dark:border-white">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover transition-transform duration-300 ease-in-out hover:scale-105">
</div>
<div class="p-4 relative">
<h3 class="text-xl dark:text-white text-black font-bold mb-2 uppercase">Product Title Here</h3>
<p class="text-black dark:text-gray-300 text-sm mb-4">A short and punchy description of the product, highlighting its brutalist appeal.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl dark:text-white text-black font-extrabold">$99.99</span>
<button class="bg-black dark:bg-white text-white dark:text-black uppercase text-sm py-2 px-4 border-2 border-black dark:border-white font-bold hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">Add to Cart</button>
</div>
</div>
<div class="absolute -top-2 -right-2 bg-black dark:bg-white text-white dark:text-black px-2 py-1 text-xs font-bold uppercase border-2 border-black dark:border-white">New</div>
</div>
</div>