产品比较组件 - Monospace/开发人员风格
一个复杂的响应式产品比较组件，采用等宽/开发人员美学设计，采用紫色/紫色配色方案。它是运动和健身应用的理想选择，具有暗模式支持和简洁的终端风格外观，具有多个比较点。
HTML 代码
<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>