Neumorphe E-Commerce-Produktkarte

<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <!-- Product Card Container -->
  <div class="max-w-xs w-full rounded-2xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-100 dark:bg-gray-800 transition-all duration-300 ease-in-out">

    <!-- Product Image -->
    <div class="relative w-full h-48 rounded-xl overflow-hidden mb-6 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark flex items-center justify-center">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="absolute inset-0 w-full h-full object-cover rounded-xl transition-transform duration-300 hover:scale-105">
    </div>

    <!-- Product Details -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 transition-colors duration-300">
      Sleek Wireless Headphones
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 transition-colors duration-300 line-clamp-2">
      Experience immersive sound with active noise cancellation and comfortable earcups.
    </p>

    <div class="flex items-end justify-between mb-6">
      <span class="text-2xl font-bold text-gray-900 dark:text-gray-50 transition-colors duration-300">
        $199.99
      </span>
      <!-- Star Rating Placeholder -->
      <div class="flex space-x-1 text-gray-400 dark:text-gray-600">
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
      </div>
    </div>

    <!-- Add to Cart Button -->
    <button class="w-full py-3 rounded-xl font-medium text-lg text-gray-800 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark hover:text-gray-900 hover:dark:text-white transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 active:shadow-neumorphic-light-inset active:dark:shadow-neumorphic-dark-inset">
      Add to Cart
    </button>

  </div>

  <!-- Custom Styles for Neumorphism Shadows (can be added to a global CSS file or <style> tag) -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2c2c2c;
    }
    .shadow-neumorphic-light-inset {
      box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark-inset {
      box-shadow: inset 6px 6px 12px #1c1c1c, inset -6px -6px 12px #2c2c2c;
    }
    .shadow-inner-neumorphic-light {
      box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
    }
    .dark .shadow-inner-neumorphic-dark {
      box-shadow: inset 2px 2px 5px #1c1c1c, inset -2px -2px 5px #2c2c2c;
    }
  </style>
</div>