Product Comparison Component
A responsive product comparison component with warm neutral colors and subtle neon/glow effects, designed for educational platforms. Includes dark mode support and semantic HTML.
HTML Code
<div class="font-sans bg-amber-50 dark:bg-zinc-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-center text-4xl font-extrabold text-amber-900 dark:text-amber-100 mb-4 tracking-tight leading-none drop-shadow-sm transition-colors duration-300">
Compare Learning Plans
</h2>
<p class="text-center text-lg text-amber-700 dark:text-amber-300 mb-12 max-w-2xl mx-auto leading-relaxed opacity-90 transition-colors duration-300">
Find the perfect learning path that fits your budget and educational goals with a detailed side-by-side comparison.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Plan 1: Basic -->
<div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">
<div class="p-8 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-zinc-700 dark:to-zinc-800 transition-colors duration-300 rounded-t-3xl border-b border-amber-200 dark:border-zinc-700">
<h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Starter</h3>
<p class="text-amber-700 dark:text-amber-300">Get started with fundamental concepts.</p>
<div class="mt-4 flex items-baseline">
<p class="text-5xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">$19</p>
<p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/month</p>
</div>
</div>
<ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>50+ Basic Courses</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>Access to Community Forum</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>Email Support</span>
</li>
<li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
<svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.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>
<span>No Certificates</span>
</li>
<li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
<svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.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>
<span>No 1-on-1 Mentorship</span>
</li>
</ul>
<div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
<a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
Choose Starter
</a>
</div>
</div>
<!-- Plan 2: Pro (Recommended) -->
<div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl border-2 border-amber-500 dark:border-amber-400">
<div class="absolute -top-3 -right-3 bg-amber-500 dark:bg-amber-400 text-white dark:text-zinc-900 px-4 py-1 rounded-full text-sm font-semibold rotate-3 shadow-lg glow-badge">
Recommended
</div>
<div class="p-8 bg-gradient-to-br from-amber-200 to-amber-100 dark:from-zinc-600 dark:to-zinc-700 transition-colors duration-300 rounded-t-3xl border-b border-amber-300 dark:border-zinc-600">
<h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Pro</h3>
<p class="text-amber-700 dark:text-amber-300">Deep dive into advanced topics and projects.</p>
<div class="mt-4 flex items-baseline">
<p class="text-5xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">$49</p>
<p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/month</p>
</div>
</div>
<ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>All Starter features</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>200+ Advanced Courses</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>Premium Support (24/7)</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>Course Completion Certificates</span>
</li>
<li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
<svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.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>
<span>No 1-on-1 Mentorship</span>
</li>
</ul>
<div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
<a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
Choose Pro
</a>
</div>
</div>
<!-- Plan 3: Enterprise -->
<div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">
<div class="p-8 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-zinc-700 dark:to-zinc-800 transition-colors duration-300 rounded-t-3xl border-b border-amber-200 dark:border-zinc-700">
<h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Enterprise</h3>
<p class="text-amber-700 dark:text-amber-300">Custom solutions for teams and organizations.</p>
<div class="mt-4 flex items-baseline">
<p class="text-4xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">Custom</p>
<p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/solution</p>
</div>
</div>
<ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>All Pro features</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>Unlimited Courses & Projects</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>Dedicated Account Manager</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" 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>
<span>Custom SSO Integration</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" filling="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>
<span>1-on-1 Mentorship Sessions</span>
</li>
</ul>
<div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
<a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
Contact Sales
</a>
</div>
</div>
</div>
<!-- Custom Styling for Glow Effects (add this to a <style> tag or CSS file if not using CDN for this) -->
<style>
@keyframes pulse-glow {
0% { box-shadow: 0 0 0px rgba(251, 191, 36, 0.4); }
50% { box-shadow: 0 0 15px rgba(251, 191, 36, 0.7), 0 0 20px rgba(251, 191, 36, 0.5); }
100% { box-shadow: 0 0 0px rgba(251, 191, 36, 0.4); }
}
.glow-button:hover {
animation: pulse-glow 1.5s infinite;
}
.glow-badge {
box-shadow: 0 0 5px rgba(251, 191, 36, 0.6);
}
.dark .glow-badge {
box-shadow: 0 0 5px rgba(251, 191, 36, 0.6);
}
</style>
</div>
</div>Related Components
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 - 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.
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.