Brutalistische Produktkarte

<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>