製品比較コンポーネント

<div class="bg-amber-100 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-teal-400 mb-8 text-center tracking-tight uppercase relative">
      <span class="block">Compare Products</span>
      <span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-pink-500 dark:bg-purple-500 rounded-full mt-2"></span>
    </h2>

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

      <!-- Product Card 1 -->
      <div class="flex-1 bg-yellow-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
                  border-4 border-blue-600 dark:border-teal-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
        <div class="absolute top-0 right-0 w-24 h-24 bg-pink-500 dark:bg-purple-600 -rotate-45 transform translate-x-12 -translate-y-12"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-teal-400 dark:bg-pink-600 rotate-45 transform -translate-x-16 translate-y-16"></div>

        <div class="relative z-10">
          <h3 class="text-2xl font-bold text-blue-800 dark:text-yellow-300 mb-4 text-center uppercase tracking-wider">Business Pro</h3>
          <div class="flex justify-center mb-6">
            <img src="https://picsum.photos/id/1015/150/150" alt="Product Lite" class="rounded-full w-24 h-24 object-cover border-4 border-blue-600 dark:border-teal-500 shadow-md">
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The essential tools for growing teams.</p>

          <ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Unlimited</span> CRM Contacts
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Email</span> Marketing Suite
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Basic</span> Analytics Dashboard
            </li>
          </ul>

          <div class="text-center">
            <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
              <span class="relative z-10">Choose Product Pro</span>
              <span class="absolute inset-0 bg-blue-700 dark:bg-teal-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="flex-1 bg-red-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
                  border-4 border-pink-600 dark:border-purple-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 dark:bg-teal-600 rotate-45 transform translate-x-16 -translate-y-16"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-yellow-500 dark:bg-pink-600 -rotate-45 transform -translate-x-12 translate-y-12"></div>

        <div class="relative z-10">
          <h3 class="text-2xl font-bold text-pink-700 dark:text-purple-300 mb-4 text-center uppercase tracking-wider">Enterprise Max</h3>
          <div class="flex justify-center mb-6">
            <img src="https://picsum.photos/id/1025/150/150" alt="Product Pro" class="rounded-full w-24 h-24 object-cover border-4 border-pink-600 dark:border-purple-500 shadow-md">
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The ultimate solution for large-scale operations.</p>

          <ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Unlimited</span> CRM Contacts
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Advanced</span> Marketing Automation
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Custom</span> Reporting Engine
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Dedicated</span> Account Manager
            </li>
          </ul>

          <div class="text-center">
            <a href="#" class="inline-block bg-pink-600 hover:bg-pink-700 dark:bg-purple-500 dark:hover:bg-purple-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
              <span class="relative z-10">Choose Enterprise Max</span>
              <span class="absolute inset-0 bg-pink-700 dark:bg-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
/* Define pulse-border animation */
@keyframes pulse-border {
  0% { border-color: rgba(96, 165, 250, 0.5); }
  50% { border-color: rgba(96, 165, 250, 1); }
  100% { border-color: rgba(96, 165, 250, 0.5); }
}

.dark .animate-pulse-border {
    animation: none; /* Disable on dark mode to prevent visual conflict with dark color scheme */
}

.animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
}

/* Adjust for dark mode borders here if a similar effect is desired with dark colors */
.dark .bg-gray-800.border-teal-500.dark\\:border-teal-500 {
    animation: pulse-border-dark 2s infinite ease-in-out;
}

.dark .bg-gray-800.border-purple-500.dark\\:border-purple-500 {
    animation: pulse-border-darker 2s infinite ease-in-out;
}

@keyframes pulse-border-dark {
  0% { border-color: rgba(20, 184, 166, 0.5); }
  50% { border-color: rgba(20, 184, 166, 1); }
  100% { border-color: rgba(20, 184, 166, 0.5); }
}

@keyframes pulse-border-darker {
  0% { border-color: rgba(168, 85, 247, 0.5); }
  50% { border-color: rgba(168, 85, 247, 1); }
  100% { border-color: rgba(168, 85, 247, 0.5); }
}

</style>