Skeuomorphic_Product_Comparison_Component

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans flex items-center justify-center">
  <div class="w-full max-w-4xl bg-blue-50 dark:bg-gray-700 rounded-xl shadow-xl border border-blue-200 dark:border-gray-600 overflow-hidden
              transform perspective-1000 rotate-x-3 transition-transform duration-500 hover:rotate-x-0 hover:scale-105 ease-in-out
              m-4 md:m-8 lg:m-12 relative">
    
    <!-- Top 'bezel' light reflection effect -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-blue-100/50 to-transparent dark:from-gray-600/50 dark:to-transparent rounded-t-xl"></div>
    
    <div class="p-6 sm:p-8 md:p-10 flex flex-col items-center">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-6 relative z-10
                 drop-shadow-md text-shadow-sm-light dark:text-shadow-sm-dark tracking-wide">
        Product Comparison
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">

        <!-- Product 1 Card -->
        <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-inner-xl border border-blue-200 dark:border-gray-600
                    transform transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl relative
                    flex flex-col items-center text-center">
          <!-- Inner 'screen' effect -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-blue-100/50 dark:from-gray-900/50 dark:to-gray-800/50 rounded-lg"></div>
          <div class="relative z-10 w-full">
            <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-4">Product Alpha</h3>
            <img src="https://picsum.photos/300/200?random=1" alt="Product Alpha" class="w-full h-auto rounded-md mb-4 shadow-md border border-blue-300 dark:border-gray-500" loading="lazy">
            <p class="text-blue-600 dark:text-blue-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <ul class="text-left text-blue-700 dark:text-blue-300 text-sm space-y-2 mb-4 list-none p-0 flex flex-col items-start w-full">
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature A</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature B</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-red-500 mr-2 shadow-sm"></span>Feature C (Missing)</li>
            </ul>
            <div class="text-2xl font-bold text-blue-800 dark:text-blue-100 mb-4">$199.99</div>
            <button class="px-6 py-2 bg-blue-600 text-white rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                           active:shadow-inner-sm border border-blue-700 dark:border-blue-500 
                           transform transition-transform duration-150 active:scale-95 active:shadow-md-inset 
                           dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
              Select Product Alpha
            </button>
          </div>
        </div>

        <!-- Product 2 Card -->
        <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-inner-xl border border-blue-200 dark:border-gray-600
                    transform transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl relative
                    flex flex-col items-center text-center">
          <!-- Inner 'screen' effect -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-blue-100/50 dark:from-gray-900/50 dark:to-gray-800/50 rounded-lg"></div>
          <div class="relative z-10 w-full">
            <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-4">Product Beta</h3>
            <img src="https://picsum.photos/300/200?random=2" alt="Product Beta" class="w-full h-auto rounded-md mb-4 shadow-md border border-blue-300 dark:border-gray-500" loading="lazy">
            <p class="text-blue-600 dark:text-blue-400 text-sm mb-4">Consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <ul class="text-left text-blue-700 dark:text-blue-300 text-sm space-y-2 mb-4 list-none p-0 flex flex-col items-start w-full">
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature A</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature B</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature C</li>
            </ul>
            <div class="text-2xl font-bold text-blue-800 dark:text-blue-100 mb-4">$249.99</div>
            <button class="px-6 py-2 bg-blue-600 text-white rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                           active:shadow-inner-sm border border-blue-700 dark:border-blue-500 
                           transform transition-transform duration-150 active:scale-95 active:shadow-md-inset
                           dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
              Select Product Beta
            </button>
          </div>
        </div>

      </div>
    </div>
    
    <!-- Bottom 'bezel' dark reflection/shadow effect -->
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-blue-300/50 to-transparent dark:from-gray-950/50 dark:to-transparent rounded-b-xl"></div>
    
  </div>
</div>

<!-- Custom Styles for Skeuomorphism -->
<style>
  /* Light mode text shadow */
  .text-shadow-sm-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4),
                 -1px -1px 2px rgba(0, 0, 0, 0.2);
  }

  /* Dark mode text shadow */
  .dark .text-shadow-sm-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),
                 -1px -1px 2px rgba(255, 255, 255, 0.1);
  }

  /* Outer shadow for the main container - resembles lifting off the surface */
  .shadow-xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .dark .shadow-xl {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  }

  /* Inner shadow for product cards - resembles an indented button or screen */
  .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0px 5px 10px -3px rgba(0, 0, 0, 0.1), inset 0px -5px 10px -3px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2),
                inset 0px 5px 10px -3px rgba(0, 0, 0, 0.3),
                inset 0px -5px 10px -3px rgba(255, 255, 255, 0.05);
  }

  /* Active state for buttons - pressing effect */
  .active\:shadow-md-inset {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15),
                inset 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .dark .active\:shadow-md-inset {
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3),
                 inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  }

  /* 3D perspective for the main container */
  .perspective-1000 {
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  .rotate-x-3 {
    transform: rotateX(3deg);
  }
  .hover\:rotate-x-0:hover {
    transform: rotateX(0deg);
  }
</style>