Product Comparison Component - Crypto
A responsive product comparison component with a luxury/premium design, candy/sweet color scheme, tailored for cryptocurrency/blockchain applications. Features dark mode support, elegant typography, and placeholder data.
HTML Code
<div class="font-sans bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 p-4 md:p-8 lg:p-12 min-h-screen">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden animate-fade-in">
<header class="p-6 md:p-8 bg-gradient-to-r from-pink-400 to-purple-400 dark:from-gray-700 dark:to-gray-900 text-white dark:text-gray-100 text-center">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-2">
Choose Your Crypto Platform
</h1>
<p class="text-lg md:text-xl opacity-90">
Compare features to find your perfect blockchain solution.
</p>
</header>
<div class="relative overflow-x-auto">
<table class="w-full table-auto border-separate border-spacing-y-2 lg:border-spacing-y-4 p-4">
<thead class="sr-only lg:not-sr-only">
<tr>
<th class="w-1/4 p-4 text-left text-lg font-semibold text-gray-600 dark:text-gray-300"></th>
<th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Alpha</th>
<th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Beta</th>
<th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Gamma</th>
</tr>
</thead>
<tbody>
<!-- Product Headers for Mobile/Tablet -->
<tr class="lg:hidden">
<td class="py-4 px-2 sm:px-4 lg:px-6 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
<div class="flex-1">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
<p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
</div>
<div class="flex-1">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
<p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
</div>
<div class="flex-1">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
<p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
</div>
</td>
</tr>
<!-- Product Details Row (Desktop) -->
<tr class="hidden lg:table-row">
<td class="py-4 px-6 text-gray-600 dark:text-gray-300 font-medium align-top"></td>
<td class="py-4 px-6 text-center align-top">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
<p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
</td>
<td class="py-4 px-6 text-center align-top">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
<p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
</td>
<td class="py-4 px-6 text-center align-top">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
<p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
</td>
</tr>
<!-- Feature Row: Consensus Mechanism -->
<tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
<td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Consensus Mechanism</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-pink-500 dark:text-pink-400">PoS (Proof of Stake)</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-purple-500 dark:text-purple-400">DPoS (Delegated PoS)</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-green-500 dark:text-green-400">PoW (Proof of Work)</td>
</tr>
<!-- Feature Row: Transaction Speed -->
<tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
<td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Tx Speed (TPS)</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">5,000+</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">100,000+</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">7-10</td>
</tr>
<!-- Feature Row: Transaction Fees (Avg) -->
<tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
<td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Avg. Tx Fee</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">$0.01 - $0.10</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">< $0.01</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-orange-600 dark:text-orange-300 font-semibold">$1 - $50 (volatile)</td>
</tr>
<!-- Feature Row: Smart Contract Support -->
<tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
<td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Smart Contracts</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
<svg class="w-6 h-6 text-green-500 mx-auto" 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>
</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
<svg class="w-6 h-6 text-green-500 mx-auto" 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>
</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
<svg class="w-6 h-6 text-red-500 mx-auto" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
</td>
</tr>
<!-- Feature Row: Decentralization Level -->
<tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
<td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Decentralization</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">High</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Medium-High</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Very High</td>
</tr>
<!-- Feature Row: Typical Use Cases -->
<tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
<td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Use Cases</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">DeFi, Dapps, GameFi</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Enterprise, CBDC, Supply Chain</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Store of Value, NFTs, Payments</td>
</tr>
<!-- Call to Action Row -->
<tr class="bg-gradient-to-r from-pink-50 dark:from-gray-700 via-purple-50 dark:via-gray-800 to-green-50 dark:to-gray-900 rounded-xl">
<td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium align-middle">Get Started</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
<button class="w-full max-w-[150px] mx-auto bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
Visit Alpha
</button>
</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
<button class="w-full max-w-[150px] mx-auto bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
Visit Beta
</button>
</td>
<td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
<button class="w-full max-w-[150px] mx-auto bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
Visit Gamma
</button>
</td>
</tr>
</tbody>
</table>
</div>
<footer class="p-6 md:p-8 bg-gradient-to-l from-pink-400 to-purple-400 dark:from-gray-900 dark:to-gray-700 text-white dark:text-gray-100 text-center">
<p class="text-sm opacity-80">© 2023 Crypto Compare. All rights reserved.</p>
<p class="text-xs mt-1 opacity-70">Data for illustrative purposes only. Consult official sources.</p>
</footer>
</div>
</div>Related Components
Brutalist Product Comparison
Brutalist Product Comparison Component for Social Media with Monochromatic color scheme and dark mode support
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.
Product Comparison Component
A simple, responsive product comparison component with dark mode support using Tailwind CSS. Displays product names, features, and pricing for comparison.