Product Comparison Component - Watercolor/Artistic
A complex, monochromatic product comparison component designed for industrial/manufacturing use, featuring a soft, watercolor/artistic aesthetic with dark mode support. Allows users to compare multiple products side-by-side.
HTML Code
<div class="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8 font-sans overflow-x-auto">
<div class="max-w-6xl mx-auto py-8">
<h2 class="text-4xl lg:text-5xl font-extrabold text-center text-indigo-900 dark:text-indigo-100 mb-8 sm:mb-12 tracking-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
Industrial Product Comparison
</h2>
<p class="text-center text-lg text-indigo-700 dark:text-indigo-300 mb-10 sm:mb-16 max-w-2xl mx-auto leading-relaxed">
Compare the features and specifications of our high-performance industrial equipment. Make an informed decision for your manufacturing needs.
</p>
<div class="w-full overflow-x-auto relative">
<div class="flex space-x-6 pb-4 sm:pb-6 pr-4" style="min-width: fit-content;">
<!-- Feature Column Header -->
<div class="flex-shrink-0 w-64 min-w-[250px] bg-indigo-200/50 dark:bg-gray-700/50 rounded-lg p-6 flex flex-col justify-between shadow-lg border border-indigo-300 dark:border-gray-600 backdrop-blur-sm">
<h3 class="text-2xl font-bold text-indigo-900 dark:text-indigo-100 mb-6">Features</h3>
<ul class="space-y-4 text-indigo-800 dark:text-indigo-200 text-lg flex-grow">
<li class="font-semibold py-2">Product Image</li>
<li class="font-semibold py-2">Product Name</li>
<li class="font-semibold py-2">Model Number</li>
<li class="font-semibold py-2">Material Strength</li>
<li class="font-semibold py-2">Operating Temperature Range</li>
<li class="font-semibold py-2">Power Consumption (kW)</li>
<li class="font-semibold py-2">Durability Rating</li>
<li class="font-semibold py-2">Warranty (Years)</li>
<li class="font-semibold py-2">Included Accessories</li>
<li class="font-semibold py-2">Certification Standards</li>
<li class="font-semibold py-2">Price</li>
</ul>
<div class="mt-8">
<!-- Placeholder for alignment -->
</div>
</div>
<!-- Product 1 -->
<div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
<div class="text-center mb-6">
<img src="https://picsum.photos/300/200?random=1" alt="Industrial Machine Alpha" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
<h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">HydraFlex 3000i</h3>
<p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: HFX-3000i</p>
</div>
<ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
<li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
<li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">HFX-3000i</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Titanium Alloy</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-20°C to 150°C</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">15 kW</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.5/10)</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">5 Years</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Tool Kit, Manual </span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ISO 9001, CE Certified</span></li>
<li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$12,500</span></li>
</ul>
<div class="mt-8 text-center">
<button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
View Product
</button>
</div>
</div>
<!-- Product 2 -->
<div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
<div class="text-center mb-6">
<img src="https://picsum.photos/300/200?random=2" alt="Industrial Machine Beta" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
<h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">MegaPress X100</h3>
<p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: MP-X100</p>
</div>
<ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
<li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
<li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">MP-X100</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Reinforced Steel</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">0°C to 200°C</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">20 kW</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Superior (9.8/10)</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">7 Years</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Hydraulic Hoses, Filters</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ASTM, RoHS Compliant</span></li>
<li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$18,000</span></li>
</ul>
<div class="mt-8 text-center">
<button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
View Product
</button>
</div>
</div>
<!-- Product 3 (Optional extra product) -->
<div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
<div class="text-center mb-6">
<img src="https://picsum.photos/300/200?random=3" alt="Industrial Machine Gamma" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
<h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">QuantumFabricator</h3>
<p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: QFX-500</p>
</div>
<ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
<li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
<li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">QFX-500</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Carbon Fiber Composite</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-5°C to 180°C</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">18 kW</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.2/10)</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">6 Years</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Spare Parts Kit, Software</span></li>
<li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">CE, UL Certified</span></li>
<li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$15,200</span></li>
</ul>
<div class="mt-8 text-center">
<button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
View Product
</button>
</div>
</div>
</div>
</div>
<div class="mt-16 text-center">
<p class="text-indigo-800 dark:text-indigo-200 text-lg sm:text-xl font-medium">
Need assistance? Our experts are ready to help you choose the right solution.
</p>
<a href="#" class="inline-block mt-6 px-8 py-4 bg-indigo-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-70 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
Contact Sales
</a>
</div>
</div>
</div>Related Components
Product Comparison Component
A product comparison component with Skeuomorphism design style, Pastel color scheme, and Moderate complexity level, designed for dashboards. It includes responsive design and dark theme support using Tailwind CSS.
RetroVintageProductComparison
Retro/Vintage Product Comparison Component for Dashboard. Simple monochromatic design with dark mode support. Uses Tailwind CSS.
Product Comparison Component
A responsive product comparison component styled in a Retro/Vintage aesthetic from the 80s/90s, featuring dark theme support with Tailwind CSS.