Price Display 组件

<div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto transition-all duration-300">
    
    <!-- Product Image (Placeholder) -->
    <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark overflow-hidden">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover">
    </div>

    <!-- Product Title -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Neumorphic Product Title</h3>
    
    <!-- Product Description (Optional - Uncomment if needed) -->
    <!-- <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">This is a brief description of the product, showcasing its features and benefits.</p> -->

    <!-- Price and Add to Cart -->
    <div class="flex items-center justify-between mb-4">
      <span class="text-3xl font-bold text-orange-600 dark:text-orange-400">$129.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark active:shadow-inner-neumorphic-btn-light dark:active:shadow-inner-neumorphic-btn-dark transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Add to Cart
      </button>
    </div>

    <!-- Additional Details (Optional) -->
    <div class="grid grid-cols-2 gap-3 text-sm text-gray-700 dark:text-gray-300">
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Category:</strong> Electronics</p>
      </div>
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Availability:</strong> In Stock</p>
      </div>
    </div>

  </div>

  <!-- TailwindCSS Config for Neumorphism Shadows (Add this to your tailwind.config.js) -->
  <div style="display: none;">
    <!-- You would typically add this to your tailwind.config.js file under 'extend' -->
    <pre>
      module.exports = {
        theme: {
          extend: {
            boxShadow: {
              'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
              'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #1a1a1a',
              'inner-neumorphic-light': 'inset 5px 5px 10px #bdbdbd, inset -5px -5px 10px #ffffff',
              'inner-neumorphic-dark': 'inset 5px 5px 10px #333333, inset -5px -5px 10px #6d6d6d',
              'neumorphic-btn-light': '6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff',
              'neumorphic-btn-dark': '6px 6px 12px #444444, -6px -6px 12px #222222',
              'inner-neumorphic-btn-light': 'inset 3px 3px 6px #8c8c8c, inset -3px -3px 6px #ffffff',
              'inner-neumorphic-btn-dark': 'inset 3px 3px 6px #3b3b3b, inset -3px -3px 6px #5f5f5f',
            }
          }
        }
      }
    </pre>
  </div>

</div>