Componente di confronto dei prodotti
Un componente reattivo per il confronto dei prodotti con colori neutri caldi e sottili effetti neon/bagliore, progettato per le piattaforme educative. Include il supporto per la modalità oscura e l'HTML semantico.
Codice HTML
<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>Componenti correlati
Componente di confronto dei prodotti
Un componente di confronto dei prodotti semplice e reattivo con un'estetica Memphis Design, utilizzando una tavolozza di colori retrò/vintage. Progettato per CRM/Business Tools, supporta la modalità oscura e visualizza le funzionalità chiave per due prodotti.
Componente di confronto dei prodotti
Un semplice componente di confronto dei prodotti progettato per l'interfaccia utente in modalità scura che utilizza una combinazione di colori in scala di grigi. Presenta un layout di base con elementi minimi, ideale per i contenuti del blog e per scopi di lettura.
Componente di confronto prodotti - Acquerello/Artistico
Un componente complesso e monocromatico di confronto dei prodotti progettato per uso industriale/manifatturiero, caratterizzato da un'estetica morbida, acquerello/artistica con supporto per la modalità scura. Consente agli utenti di confrontare più prodotti fianco a fianco.