製品比較コンポーネント - サイバーパンクレトロチャリティー

<div class="bg-gray-200 dark:bg-gray-900 font-sans p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl">
  <h2 class="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide uppercase">
    Choose Your Impact
  </h2>

  <div class="flex flex-col lg:flex-row justify-center items-stretch gap-6">

    <!-- Left Product/Option -->
    <div class="flex-1 max-w-sm w-full lg:w-1/2 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-fuchsia-500 dark:border-fuchsia-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-fuchsia-300/10 via-fuchsia-500/10 to-transparent pointer-events-none rounded-lg"></div>
      <div class="relative z-10">
        <h3 class="text-2xl font-bold text-fuchsia-600 dark:text-fuchsia-400 mb-4 tracking-wider uppercase">Basic Support</h3>
        <img src="https://picsum.photos/seed/charity1/300/200" alt="Basic Support" class="w-full h-40 object-cover rounded-md mb-4 border border-fuchsia-400/50">
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
          Provide essential resources like a warm meal and a blanket for someone in need.
          Every small contribution makes a significant difference in their daily lives.
        </p>
        <ul class="text-gray-600 dark:text-gray-400 text-sm mb-6 space-y-2">
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-400" 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>Warm Meal</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-400" 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>Comfort Blanket</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-400" 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>Hygiene Kit</li>
        </ul>
        <p class="text-center text-3xl font-extrabold text-fuchsia-700 dark:text-fuchsia-300 mb-6">$15 <span class="text-base font-normal text-gray-500 dark:text-gray-400">/ once</span></p>
        <button class="w-full py-3 px-6 bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold rounded-md transition duration-300 ease-in-out transform hover:scale-105 shadow-lg relative overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10">Select Basic Support</span>
        </button>
      </div>
    </div>

    <!-- Right Product/Option -->
    <div class="flex-1 max-w-sm w-full lg:w-1/2 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-teal-500 dark:border-teal-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-teal-300/10 via-teal-500/10 to-transparent pointer-events-none rounded-lg"></div>
      <div class="relative z-10">
        <h3 class="text-2xl font-bold text-teal-600 dark:text-teal-400 mb-4 tracking-wider uppercase">Enhanced Impact</h3>
        <img src="https://picsum.photos/seed/charity2/300/200" alt="Enhanced Impact" class="w-full h-40 object-cover rounded-md mb-4 border border-teal-400/50">
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
          Contribute to long-term solutions, vocational training, and safe shelter programs.
          Empower individuals to rebuild their lives and achieve self-sufficiency.
        </p>
        <ul class="text-gray-600 dark:text-gray-400 text-sm mb-6 space-y-2">
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-400" 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>Vocational Training</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-400" 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>Safe Shelter Access</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-400" 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>Mentorship Programs</li>
        </ul>
        <p class="text-center text-3xl font-extrabold text-teal-700 dark:text-teal-300 mb-6">$45 <span class="text-base font-normal text-gray-500 dark:text-gray-400">/ once</span></p>
        <button class="w-full py-3 px-6 bg-teal-600 hover:bg-teal-700 text-white font-bold rounded-md transition duration-300 ease-in-out transform hover:scale-105 shadow-lg relative overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-teal-500 to-cyan-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10">Select Enhanced Impact</span>
        </button>
      </div>
    </div>

  </div>
</div>