Product Comparison Component - Retro Corporate Style
A responsive product comparison component with a retro/vintage corporate aesthetic using monochromatic blue color scheme. Features multiple interactive elements and dark mode support. The design includes retro-styled cards with 80s/90s inspired geometric patterns, old-school typography, and pixel-like accents. Perfect for business websites wanting to stand out with nostalgic design while maintaining professionalism.
HTML Code
<!-- Product Comparison Component with Retro/Vintage 80s/90s Corporate Style -->
<div class="bg-blue-50 dark:bg-blue-900 py-12 px-4 font-mono">
<!-- Retro Header with pixelated border -->
<div class="max-w-7xl mx-auto mb-12">
<div class="border-4 border-blue-600 dark:border-blue-400 p-4 bg-white dark:bg-blue-800 shadow-lg relative overflow-hidden">
<div class="absolute top-0 right-0 w-24 h-24 bg-blue-300 dark:bg-blue-500 transform rotate-45 translate-x-12 -translate-y-12"></div>
<h2 class="text-4xl font-bold tracking-wider text-blue-800 dark:text-blue-200 uppercase text-center mb-2 relative z-10">PRODUCT COMPARISON</h2>
<p class="text-blue-600 dark:text-blue-300 text-center tracking-wide relative z-10">Select the perfect solution for your business needs</p>
<!-- Pixelated line decoration -->
<div class="flex justify-center mt-4">
<div class="flex space-x-1">
<div class="w-3 h-3 bg-blue-300 dark:bg-blue-500"></div>
<div class="w-3 h-3 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-3 h-3 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-3 h-3 bg-blue-600 dark:bg-blue-200"></div>
<div class="w-12 h-3 bg-blue-700 dark:bg-blue-100"></div>
<div class="w-3 h-3 bg-blue-600 dark:bg-blue-200"></div>
<div class="w-3 h-3 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-3 h-3 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-3 h-3 bg-blue-300 dark:bg-blue-500"></div>
</div>
</div>
</div>
</div>
<!-- Filter Controls with Retro Style -->
<div class="max-w-7xl mx-auto mb-10">
<div class="bg-blue-100 dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500 p-4 rounded grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div class="space-y-2">
<label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">Filter By Category</label>
<select class="w-full bg-white dark:bg-blue-700 border-2 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-100 font-mono p-2 focus:ring-2 focus:ring-blue-600 focus:border-transparent">
<option>All Categories</option>
<option>Basic Solutions</option>
<option>Advanced Solutions</option>
<option>Enterprise Solutions</option>
</select>
</div>
<div class="space-y-2">
<label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">Sort By</label>
<select class="w-full bg-white dark:bg-blue-700 border-2 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-100 font-mono p-2 focus:ring-2 focus:ring-blue-600 focus:border-transparent">
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Popularity</option>
<option>Features</option>
</select>
</div>
<div class="space-y-2">
<label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">View Style</label>
<div class="flex space-x-4">
<button class="flex-1 py-2 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 shadow-md">
<span class="block text-xs">Grid</span>
</button>
<button class="flex-1 py-2 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 text-blue-800 dark:text-blue-100 font-bold border-2 border-blue-400 dark:border-blue-500 shadow-md">
<span class="block text-xs">List</span>
</button>
</div>
</div>
</div>
</div>
<!-- Product Comparison Grid -->
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Product 1 -->
<div class="bg-white dark:bg-blue-800 border-4 border-blue-400 dark:border-blue-500 shadow-lg transform hover:scale-105 transition-all duration-300">
<!-- Retro Header with zigzag pattern -->
<div class="bg-blue-300 dark:bg-blue-600 p-4 relative">
<div class="absolute bottom-0 left-0 right-0 h-2 flex">
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
</div>
<h3 class="text-blue-900 dark:text-white text-2xl font-bold text-center uppercase tracking-wider mb-1">BASIC PLAN</h3>
<div class="text-blue-700 dark:text-blue-200 text-center font-bold">Starter Solution</div>
</div>
<div class="p-6">
<div class="text-center mb-6">
<span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$199</span>
<span class="text-blue-600 dark:text-blue-300">/month</span>
</div>
<img src="https://picsum.photos/seed/basic/400/200" alt="Basic Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">5 User Licenses</span>
</li>
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">10GB Storage</span>
</li>
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Basic Analytics</span>
</li>
<li class="flex items-start opacity-50">
<div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
</li>
<li class="flex items-start opacity-50">
<div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Premium Support</span>
</li>
</ul>
<!-- Satisfaction Rating -->
<div class="mb-6">
<div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
<div class="flex">
<div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-1/5 h-4 bg-blue-200 dark:bg-blue-700"></div>
</div>
</div>
<div class="space-y-4">
<button class="w-full p-3 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 uppercase tracking-wider shadow-md">
SELECT PLAN
</button>
<button class="w-full p-2 bg-transparent border-2 border-blue-400 dark:border-blue-500 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
VIEW DETAILS
</button>
</div>
</div>
<!-- Retro Footer Decoration -->
<div class="h-4 bg-gradient-to-r from-blue-300 via-blue-400 to-blue-300 dark:from-blue-600 dark:via-blue-500 dark:to-blue-600"></div>
</div>
<!-- Product 2 (Featured) -->
<div class="bg-white dark:bg-blue-800 border-4 border-blue-600 dark:border-blue-300 shadow-xl transform hover:scale-105 transition-all duration-300 relative -mt-4 md:-mt-8">
<!-- "MOST POPULAR" badge -->
<div class="absolute -top-4 left-0 right-0 flex justify-center">
<div class="bg-blue-600 dark:bg-blue-400 text-white dark:text-blue-900 py-1 px-6 text-sm font-bold uppercase tracking-wider shadow-lg">
MOST POPULAR
</div>
</div>
<!-- Retro Header with zigzag pattern -->
<div class="bg-blue-500 dark:bg-blue-400 p-4 relative">
<div class="absolute bottom-0 left-0 right-0 h-2 flex">
<div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
<div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
<div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
<div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
<div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
</div>
<h3 class="text-white dark:text-blue-900 text-2xl font-bold text-center uppercase tracking-wider mb-1">PRO PLAN</h3>
<div class="text-blue-100 dark:text-blue-700 text-center font-bold">Business Solution</div>
</div>
<div class="p-6">
<div class="text-center mb-6">
<span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$499</span>
<span class="text-blue-600 dark:text-blue-300">/month</span>
</div>
<img src="https://picsum.photos/seed/pro/400/200" alt="Pro Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">25 User Licenses</span>
</li>
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">100GB Storage</span>
</li>
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Advanced Analytics</span>
</li>
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
</li>
<li class="flex items-start opacity-50">
<div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Premium Support</span>
</li>
</ul>
<!-- Satisfaction Rating -->
<div class="mb-6">
<div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
<div class="flex">
<div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
<div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
</div>
</div>
<div class="space-y-4">
<button class="w-full p-3 bg-blue-700 dark:bg-blue-300 hover:bg-blue-800 dark:hover:bg-blue-200 text-white dark:text-blue-900 font-bold border-2 border-blue-900 dark:border-blue-400 uppercase tracking-wider shadow-md">
SELECT PLAN
</button>
<button class="w-full p-2 bg-transparent border-2 border-blue-500 dark:border-blue-400 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
VIEW DETAILS
</button>
</div>
</div>
<!-- Retro Footer Decoration -->
<div class="h-4 bg-gradient-to-r from-blue-500 via-blue-600 to-blue-500 dark:from-blue-400 dark:via-blue-300 dark:to-blue-400"></div>
</div>
<!-- Product 3 -->
<div class="bg-white dark:bg-blue-800 border-4 border-blue-400 dark:border-blue-500 shadow-lg transform hover:scale-105 transition-all duration-300">
<!-- Retro Header with zigzag pattern -->
<div class="bg-blue-300 dark:bg-blue-600 p-4 relative">
<div class="absolute bottom-0 left-0 right-0 h-2 flex">
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
<div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
<div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
</div>
<h3 class="text-blue-900 dark:text-white text-2xl font-bold text-center uppercase tracking-wider mb-1">ENTERPRISE</h3>
<div class="text-blue-700 dark:text-blue-200 text-center font-bold">Complete Solution</div>
</div>
<div class="p-6">
<div class="text-center mb-6">
<span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$999</span>
<span class="text-blue-600 dark:text-blue-300">/month</span>
</div>
<img src="https://picsum.photos/seed/enterprise/400/200" alt="Enterprise Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Unlimited Users</span>
</li>
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">1TB Storage</span>
</li>
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Enterprise Analytics</span>
</li>
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
</li>
<li class="flex items-start">
<div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
<span class="text-blue-800 dark:text-blue-100">Premium Support 24/7</span>
</li>
</ul>
<!-- Satisfaction Rating -->
<div class="mb-6">
<div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
<div class="flex">
<div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
</div>
</div>
<div class="space-y-4">
<button class="w-full p-3 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 uppercase tracking-wider shadow-md">
SELECT PLAN
</button>
<button class="w-full p-2 bg-transparent border-2 border-blue-400 dark:border-blue-500 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
VIEW DETAILS
</button>
</div>
</div>
<!-- Retro Footer Decoration -->
<div class="h-4 bg-gradient-to-r from-blue-300 via-blue-400 to-blue-300 dark:from-blue-600 dark:via-blue-500 dark:to-blue-600"></div>
</div>
</div>
<!-- Comparison Table -->
<div class="max-w-7xl mx-auto mt-16 bg-white dark:bg-blue-800 border-4 border-blue-500 dark:border-blue-400 shadow-lg overflow-x-auto">
<div class="text-center py-6 bg-blue-200 dark:bg-blue-700 uppercase tracking-wider font-bold text-blue-800 dark:text-blue-100 text-2xl">
Detailed Comparison
</div>
<table class="w-full border-collapse">
<thead class="bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100">
<tr>
<th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-left">Features</th>
<th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-center">Basic Plan</th>
<th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-center bg-blue-200 dark:bg-blue-600">Pro Plan</th>
<th class="p-4 border-b-2 border-blue-300 dark:border-blue-600 text-center">Enterprise</th>
</tr>
</thead>
<tbody>
<tr class="border-b-2 border-blue-200 dark:border-blue-700">
<td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">User Licenses</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">5 Users</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">25 Users</td>
<td class="p-4 text-center">Unlimited</td>
</tr>
<tr class="border-b-2 border-blue-200 dark:border-blue-700">
<td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Storage Capacity</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">10GB</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">100GB</td>
<td class="p-4 text-center">1TB</td>
</tr>
<tr class="border-b-2 border-blue-200 dark:border-blue-700">
<td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Analytics</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">Basic</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">Advanced</td>
<td class="p-4 text-center">Enterprise</td>
</tr>
<tr class="border-b-2 border-blue-200 dark:border-blue-700">
<td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Support</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">Email Only</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">Email & Phone</td>
<td class="p-4 text-center">24/7 Priority</td>
</tr>
<tr>
<td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Custom Reports</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">
<div class="inline-block w-6 h-6 bg-blue-200 dark:bg-blue-700 relative">
<div class="absolute inset-0 transform rotate-45 bg-blue-500 dark:bg-blue-400" style="clip-path: polygon(0 0, 100% 100%, 0 100%);"></div>
</div>
</td>
<td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">
<div class="inline-block w-6 h-6 bg-blue-600 dark:bg-blue-300"></div>
</td>
<td class="p-4 text-center">
<div class="inline-block w-6 h-6 bg-blue-600 dark:bg-blue-300"></div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Customer Testimonial with Retro Style -->
<div class="max-w-5xl mx-auto mt-16 bg-gradient-to-r from-blue-100 via-blue-200 to-blue-100 dark:from-blue-700 dark:via-blue-600 dark:to-blue-700 p-1">
<div class="bg-white dark:bg-blue-800 p-8">
<div class="flex flex-col md:flex-row items-center">
<div class="mb-6 md:mb-0 md:mr-8 flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Customer" class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-500">
</div>
<div>
<p class="text-blue-800 dark:text-blue-200 italic mb-4">"This product comparison tool helped our company make the right decision for our business needs. The intuitive interface and detailed feature breakdown made it easy to understand the value proposition of each plan."</p>
<div class="font-bold text-blue-600 dark:text-blue-300">Sarah Johnson</div>
<div class="text-blue-500 dark:text-blue-400 text-sm">CTO, TechCorp Industries</div>
</div>
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="max-w-5xl mx-auto mt-16 mb-16">
<h3 class="text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6 text-center uppercase tracking-wider">Frequently Asked Questions</h3>
<div class="space-y-4">
<div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
<div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
<h4 class="font-bold text-blue-800 dark:text-blue-200">Can I upgrade or downgrade my plan later?</h4>
<span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
</div>
<div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
<p class="text-blue-700 dark:text-blue-300">Yes, you can easily upgrade or downgrade your plan at any time. Changes will be reflected on your next billing cycle.</p>
</div>
</div>
<div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
<div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
<h4 class="font-bold text-blue-800 dark:text-blue-200">Is there a free trial available?</h4>
<span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
</div>
<div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
<p class="text-blue-700 dark:text-blue-300">We offer a 14-day free trial on all our plans. No credit card required to start your trial period.</p>
</div>
</div>
<div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
<div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
<h4 class="font-bold text-blue-800 dark:text-blue-200">Do you offer custom enterprise solutions?</h4>
<span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
</div>
<div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
<p class="text-blue-700 dark:text-blue-300">Yes, we can tailor our Enterprise plan to meet your specific business requirements. Contact our sales team for a custom quote.</p>
</div>
</div>
</div>
</div>
<!-- Retro Footer -->
<div class="max-w-7xl mx-auto mt-8 bg-blue-800 dark:bg-blue-950 text-white p-4 text-center">
<div class="flex space-x-1 justify-center mb-4">
<div class="w-3 h-3 bg-blue-500 dark:bg-blue-400"></div>
<div class="w-3 h-3 bg-blue-400 dark:bg-blue-500"></div>
<div class="w-3 h-3 bg-blue-300 dark:bg-blue-600"></div>
<div class="w-20 h-3 bg-blue-200 dark:bg-blue-700"></div>
<div class="w-3 h-3 bg-blue-300 dark:bg-blue-600"></div>
<div class="w-3 h-3 bg-blue-400 dark:bg-blue-500"></div>
<div class="w-3 h-3 bg-blue-500 dark:bg-blue-400"></div>
</div>
<p class="uppercase tracking-widest text-sm font-bold">© 2023 Your Professional Business</p>
</div>
</div>Related Components
Product Comparison Component
A complex product comparison component designed with Material Design principles, featuring a vibrant color scheme and support for dark mode. Ideal for social media networking interfaces.
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 responsive product comparison component styled in a Retro/Vintage aesthetic from the 80s/90s, featuring dark theme support with Tailwind CSS.