Produktvergleichskomponente - Neumorphism Monochromatic

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

  <div class="container mx-auto p-4 md:p-8 rounded-3xl shadow-xl dark:shadow-xl-dark bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">

    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight leading-tight transition-colors duration-300">
      Choose Your <span class="text-purple-600 dark:text-purple-400">Event Pass</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Plan 1: Basic Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Standard Access</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Ideal for basic conference attendance and networking.</p>

          <div class="text-4xl font-extrabold mb-8">
            $99<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Networking Opportunities
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              Workshop Access
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Standard Pass
        </button>
      </div>

      <!-- Plan 2: Premium Pass (Recommended) -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover relative border-2 border-purple-500 dark:border-purple-400">
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-purple-500 dark:bg-purple-400 text-white text-sm font-bold rounded-full shadow-md">
          Recommended
        </div>
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">VIP Experience</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Full access to all event features and exclusive content.</p>

          <div class="text-4xl font-extrabold mb-8">
            $249<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Networking Opportunities
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Full Workshop Access
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get VIP Pass
        </button>
      </div>

      <!-- Plan 3: Enterprise Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Team Bundle</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Designed for teams, with additional benefits and support.</p>

          <div class="text-4xl font-extrabold mb-8">
            $499<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/5 passes</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              All VIP Pass Features
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              5 Team Members Included
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Dedicated Support
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Private Networking Lounge Access
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 hover:bg-purple-700 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Team Bundle
        </button>
      </div>

    </div>
  </div>

  <!-- Tailwind JIT custom styles for neumorphism shadows (typically in tailwind.config.js) -->
  <style>
    .shadow-xl {
      box-shadow: 10px 10px 20px rgba(174, 174, 192, .4), -10px -10px 20px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-xl-dark {
      box-shadow: 10px 10px 20px rgba(0, 0, 0, .4), -10px -10px 20px rgba(120, 120, 120, .2);
    }
    .shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(174, 174, 192, .4), -8px -8px 16px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(0, 0, 0, .4), -8px -8px 16px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-hover:hover {
      box-shadow: 4px 4px 8px rgba(174, 174, 192, .4), -4px -4px 8px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-dark-hover:hover {
      box-shadow: 4px 4px 8px rgba(0, 0, 0, .4), -4px -4px 8px rgba(120, 120, 120, .2);
    }

    .shadow-neumorphic-button {
      box-shadow: 3px 3px 6px rgba(174, 174, 192, .4), -3px -3px 6px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic-button-dark {
      box-shadow: 3px 3px 6px rgba(0, 0, 0, .4), -3px -3px 6px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-button-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(174, 174, 192, .4), inset -3px -3px 7px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-button-dark-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .6), inset -3px -3px 7px rgba(120, 120, 120, .3);
    }
  </style>

</div>