Componente di visualizzazione del prezzo
Un componente complesso di visualizzazione dei prezzi in stile retrò-vintage per i portafogli, caratterizzato da una combinazione di colori triadica, reattività e supporto per la modalità oscura utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
Codice HTML
<div class="bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center p-8">
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-lg p-8 max-w-sm w-full transform transition-all duration-500 hover:scale-105">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold font-mono mb-2 text-teal-600 dark:text-teal-400">Pro Plan</h2>
<p class="text-gray-600 dark:text-gray-400">Level up your portfolio</p>
</div>
<div class="text-center mb-8">
<p class="text-5xl font-extrabold mb-2 text-purple-600 dark:text-purple-400">$29<span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span></p>
<p class="text-sm text-gray-500 dark:text-gray-300">Billed Annually</p>
</div>
<ul class="mb-8 space-y-4">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Unlimited Projects
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
10GB Storage
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Custom Domain
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
24/7 Support
</li>
</ul>
<button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 transform hover:scale-105">
Get Started
</button>
</div>
</div>Componenti correlati
Componente di visualizzazione del prezzo
Componente di visualizzazione dei prezzi in stile neumorfismo con effetti reattivi e supporto per temi scuri.
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi reattivo per una dashboard, caratterizzato da microinterazioni coinvolgenti e una combinazione di colori triadica, con supporto per la modalità scura.
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi ispirato al 3D con una combinazione di colori monocromatica, progettato per le interfacce dei social media. Si tratta di un componente complesso e reattivo con supporto per la modalità oscura, costruito utilizzando Tailwind CSS. Non è incluso alcun JavaScript.