サイバーパンク製品比較コンポーネント

<div class="bg-gray-950 dark:bg-black text-gray-200 py-12 px-4 sm:px-6 lg:px-8 font-mono">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-12 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 text-transparent bg-clip-text leading-tight">
      Choose Your Cyber-Experience
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-gray-900 dark:bg-gray-950 rounded-lg shadow-lg border border-blue-500/30 dark:border-blue-700/50 transform hover:scale-105 transition-transform duration-300 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-900/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-blue-400 dark:text-blue-500 uppercase tracking-wider">Solo-Sync Pass</h3>
          <p class="text-gray-400 mb-6 text-sm">Access to main virtual tracks & networking hub.</p>
          <div class="text-4xl font-extrabold text-white mb-6 animate-pulse-light">
            $99
            <span class="text-base text-gray-500">/event</span>
          </div>
          <ul class="text-gray-300 mb-8 space-y-3">
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-blue-400 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>All Virtual Stages</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-blue-400 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Basic AI-Net Access</li>
            <li class="flex items-center opacity-70"><svg class="w-5 h-5 mr-2 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>No Dedicated Support</li>
          </ul>
          <a href="#" class="block w-full text-center py-3 px-6 rounded-md text-sm font-semibold bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-150 ease-in-out text-white border border-gray-600 hover:border-gray-500">
            Activate Solo-Sync
          </a>
        </div>
      </div>

      <!-- Product Card 2 (Recommended) -->
      <div class="bg-gray-900 dark:bg-gray-950 rounded-lg shadow-lg border-2 border-purple-500 dark:border-purple-700 transform hover:scale-105 transition-transform duration-300 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-900/10 via-pink-900/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="absolute top-0 right-0 mt-4 mr-4 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider shadow-lg neon-pulse">
          Recommended
        </div>
        <div class="p-6 relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-purple-400 dark:text-purple-500 uppercase tracking-wider">Nexus Pro Pass</h3>
          <p class="text-gray-400 mb-6 text-sm">Full virtual access, exclusive workshops & premium support.</p>
          <div class="text-4xl font-extrabold text-white mb-6 animate-pulse-strong">
            $249
            <span class="text-base text-gray-500">/event</span>
          </div>
          <ul class="text-gray-300 mb-8 space-y-3">
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-purple-400 dark:text-purple-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>All Virtual Stages & Workshops</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-purple-400 dark:text-purple-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Enhanced AI-Net Access</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-purple-400 dark:text-purple-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Priority Digi-Support</li>
          </ul>
          <a href="#" class="block w-full text-center py-3 px-6 rounded-md text-sm font-semibold bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-purple-400 transition duration-150 ease-in-out text-white neon-button">
            Engage Nexus Protocol
          </a>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-900 dark:bg-gray-950 rounded-lg shadow-lg border border-pink-500/30 dark:border-pink-700/50 transform hover:scale-105 transition-transform duration-300 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-900/10 via-blue-900/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-pink-400 dark:text-pink-500 uppercase tracking-wider">Omni-Realm Elite</h3>
          <p class="text-gray-400 mb-6 text-sm">All-inclusive pass for virtual & physical access (if applicable).</p>
          <div class="text-4xl font-extrabold text-white mb-6 animate-pulse-light">
            $499
            <span class="text-base text-gray-500">/event</span>
          </div>
          <ul class="text-gray-300 mb-8 space-y-3">
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-pink-400 dark:text-pink-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Full Access (Virtual + Physical)</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-pink-400 dark:text-pink-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Exclusive Data Streams</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-pink-400 dark:text-pink-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Quantum Support</li>
          </ul>
          <a href="#" class="block w-full text-center py-3 px-6 rounded-md text-sm font-semibold bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition duration-150 ease-in-out text-white border border-gray-600 hover:border-gray-500">
            Unlock Omni-Realm
          </a>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Basic Keyframe Animations for Neon Effect */
    @keyframes pulse-light {
      0%, 100% {
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 0 8px rgba(255, 255, 255, 0.2);
      }
      50% {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.4);
      }
    }

    @keyframes pulse-strong {
      0%, 100% {
        text-shadow: 0 0 8px #a855f7, 0 0 16px #c084fc;
      }
      50% {
        text-shadow: 0 0 12px #a855f7, 0 0 20px #c084fc, 0 0 30px #e879f9;
      }
    }

    @keyframes neon-button-pulse {
      0%, 100% {
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.7), 0 0 10px rgba(168, 85, 247, 0.5);
      }
      50% {
        box-shadow: 0 0 8px rgba(168, 85, 247, 0.9), 0 0 15px rgba(168, 85, 247, 0.7), 0 0 25px rgba(168, 85, 247, 0.3);
      }
    }

    .animate-pulse-light {
      animation: pulse-light 2s infinite alternate;
    }

    .animate-pulse-strong {
      animation: pulse-strong 2s infinite alternate;
    }

    .neon-pulse {
      text-shadow: 0 0 5px #a855f7, 0 0 10px #c084fc;
      animation: pulse-strong 3s infinite alternate;
    }

    .neon-button {
      animation: neon-button-pulse 2s infinite alternate;
    }

    /* Dark Mode specific adjustments - Tailwind already handles most with dark: prefix */
    .dark .neon-button {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.7), 0 0 10px rgba(139, 92, 246, 0.5);
    }

    .dark .neon-button:hover {
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.9), 0 0 15px rgba(139, 92, 246, 0.7), 0 0 25px rgba(139, 92, 246, 0.3);
    }

  </style>
</div>