Produktvergleichskomponente

<div class="bg-white p-4 sm:p-6 lg:p-8 rounded-2xl shadow-xl max-w-4xl mx-auto my-8 dark:bg-gray-800 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-green-600 dark:text-green-400">Compare Our Fun Features!</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Product 1 Card -->
    <div class="bg-blue-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-blue-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=1" alt="Product 1" class="rounded-full border-4 border-blue-400 dark:border-blue-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-blue-800 dark:text-blue-300">Product Alpha 🎉</h3>
      
      <ul class="list-none space-y-3 text-lg text-blue-700 dark:text-blue-200">
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Super Speedy Performance</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Unlimited Whimsical Widgets</li>
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> No Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Friendly Support Sprites</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
          Choose Alpha!
        </button>
      </div>
    </div>

    <!-- Product 2 Card -->
    <div class="bg-orange-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-orange-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=2" alt="Product 2" class="rounded-full border-4 border-orange-400 dark:border-orange-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-orange-800 dark:text-orange-300">Product Beta 🌟</h3>
      

      <ul class="list-none space-y-3 text-lg text-orange-700 dark:text-orange-200">
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> Standard Speed</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Dazzling Gimmicks Included</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Exclusive Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Mythical Support Beings</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-orange-800">
          Select Beta!
        </button>
      </div>
    </div>
  </div>
</div>