製品比較コンポーネント - 等幅/開発者スタイル

<div class="font-['JetBrains_Mono'] bg-gray-50 dark:bg-gray-950 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl dark:shadow-purple-950/50 overflow-hidden">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  
  <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6 sm:mb-8 text-center text-purple-700 dark:text-purple-400"><span class="text-purple-500 dark:text-purple-600">\>_</span> Product Comparison Matrix</h2>
  
  <p class="mb-8 text-center text-gray-600 dark:text-gray-400 text-sm sm:text-base">Analyze and compare key features across different fitness trackers and sports gear.</p>

  <div class="overflow-x-auto relative shadow-md sm:rounded-lg border border-purple-200 dark:border-purple-900">
    <table class="w-full text-left text-sm whitespace-nowrap table-auto">
      <thead class="text-xs uppercase bg-purple-50 dark:bg-gray-900 text-purple-700 dark:text-purple-400 border-b border-purple-200 dark:border-purple-900">
        <tr>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider">Feature</th>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider text-center border-l border-purple-200 dark:border-purple-900">
            <div class="flex flex-col items-center justify-center">
              <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-purple-500 dark:border-purple-400 mb-1 lg:mb-2" src="https://picsum.photos/id/66/100" alt="Product A">
              <span class="block text-xs sm:text-sm font-semibold text-purple-700 dark:text-purple-300">GearPro Elite 5000</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">$299.99</span>
            </div>
          </th>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider text-center border-l border-purple-200 dark:border-purple-900">
            <div class="flex flex-col items-center justify-center">
              <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-purple-500 dark:border-purple-400 mb-1 lg:mb-2" src="https://picsum.photos/id/111/100" alt="Product B">
              <span class="block text-xs sm:text-sm font-semibold text-purple-700 dark:text-purple-300">AthleteTrack Pro X</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">$199.99</span>
            </div>
          </th>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider text-center border-l border-purple-200 dark:border-purple-900">
            <div class="flex flex-col items-center justify-center">
              <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-purple-500 dark:border-purple-400 mb-1 lg:mb-2" src="https://picsum.photos/id/123/100" alt="Product C">
              <span class="block text-xs sm:text-sm font-semibold text-purple-700 dark:text-purple-300">Velocity Band 3</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">$129.99</span>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- Row 1: GPS -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">GPS Tracking</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Full GPS</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Connected GPS</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-red-500 dark:text-red-400">✖ No GPS</span>
          </td>
        </tr>
        <!-- Row 2: Heart Rate -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Heart Rate Monitor</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Optical + ECG</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Optical</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Optical</span>
          </td>
        </tr>
        <!-- Row 3: Battery Life -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Battery Life (Typical)</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">7 Days</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">5 Days</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">10 Days</td>
        </tr>
        <!-- Row 4: Water Resistance -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Water Resistance</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">5 ATM</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">3 ATM</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">Swim-proof</td>
        </tr>
        <!-- Row 5: Display Type -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Display Type</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">AMOLED</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">LCD</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">OLED</td>
        </tr>
        <!-- Row 6: Sports Modes -->
        <tr class="bg-white dark:bg-gray-800 border-b-0 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Sports Modes</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">25+ modes</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">15+ modes</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">10+ modes</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="mt-8 flex flex-col sm:flex-row justify-around items-center border-t border-purple-200 dark:border-purple-900 pt-6">
    <button class="flex-1 text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 mb-3 sm:mb-0 sm:mr-4 max-w-xs w-full">View GearPro Elite 5000</button>
    <button class="flex-1 text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 mb-3 sm:mb-0 sm:mr-4 max-w-xs w-full">View AthleteTrack Pro X</button>
    <button class="flex-1 text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 max-w-xs w-full">View Velocity Band 3</button>
  </div>
</div>