Product Comparison Component - Monospace/Developer Style
A complex, responsive product comparison component designed with a monospace/developer aesthetic, sporting a purple/violet color scheme. Ideal for sports and fitness applications, it features dark mode support and a clean, terminal-inspired look with multiple comparison points.
HTML Code
<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>Related Components
Product Comparison Component - Real Estate (Paper/Print-inspired)
A simple, paper/print-inspired product comparison component for real estate listings, featuring two properties. Uses purple/violet tones and supports dark mode.
Product Comparison Component
A responsive product comparison component with 3D-like design elements, dark theme support, and integration of placeholder images for product visualization and user avatars using picsum.photos and randomuser.me.
EarthyProductComparison
A responsive product comparison component for e-commerce, featuring three product cards. Styled with Tailwind CSS using an earth tone color scheme (browns, greens, ambers) and simple 3D design elements like shadows and accent bars for depth and engagement. Includes dark mode support and uses placeholder images from picsum.photos.