Product Comparison Component
A responsive product comparison component with dark theme support, featuring a minimalist/flat design and a pastel color scheme. This complex component is suitable for dashboards, allowing users to compare multiple products with detailed specifications and interactive elements.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Product Comparison</h2>
<!-- Comparison Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-lime-50 dark:bg-lime-900">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Feature</th>
<th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product A</th>
<th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product B</th>
<th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product C</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Image</td>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productA/200/200" alt="Product A">
<p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product A</p>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productB/200/200" alt="Product B">
<p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product B</p>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productC/200/200" alt="Product C">
<p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product C</p>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Price</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$199.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$249.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$179.99</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Rating</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★☆</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★★</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★☆☆</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C1</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C2</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Availability</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 dark:text-red-400">Out of Stock</td>
</tr>
<!-- Add more rows for additional features as needed -->
</tbody>
</table>
</div>
<!-- Call to Action Buttons -->
<div class="mt-6 flex flex-col sm:flex-row justify-around items-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
Buy Product A
</button>
<button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
Buy Product B
</button>
<button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-300 cursor-not-allowed dark:bg-lime-700 dark:text-lime-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800" disabled>
Buy Product C (Out of Stock)
</button>
</div>
<!-- Additional Interactive Elements -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Product A Details Card -->
<div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product A Highlights</h3>
<ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
<li>High performance processor</li>
<li>Long-lasting battery</li>
<li>Excellent user reviews</li>
</ul>
</div>
<!-- Product B Details Card -->
<div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product B Highlights</h3>
<ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
<li>Superior camera quality</li>
<li>Sleek, slim design</li>
<li>Advanced security features</li>
</ul>
</div>
<!-- Product C Details Card -->
<div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product C Highlights</h3>
<ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
<li>Budget-friendly option</li>
<li>Good for everyday use</li>
<li>Compact and portable</li>
</ul>
</div>
</div>
<!-- User Reviews Section -->
<div class="mt-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h3>
<div class="space-y-4">
<!-- Review 1 -->
<div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Jane Doe</p>
<p class="text-sm text-yellow-500">★★★★★</p>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product B is absolutely fantastic! The camera is unreal, and it's so fast. Highly recommend!"</p>
</div>
</div>
<!-- Review 2 -->
<div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">John Smith</p>
<p class="text-sm text-yellow-500">★★★★☆</p>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product A is a solid choice for the price. Does everything I need it to do. Battery life is impressive."</p>
</div>
</div>
<!-- Review 3 -->
<div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Emily White</p>
<p class="text-sm text-yellow-500">★★★☆☆</p>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product C is okay for the budget, but you definitely get what you pay for. Wish the camera was better."</p>
</div>
</div>
</div>
</div>
</div>
Related Components
Product Comparison Component
A simple, responsive product comparison component with dark mode support using Tailwind CSS. Displays product names, features, and pricing for comparison.
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.
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.