Componente di visualizzazione del prezzo
Componente di visualizzazione dei prezzi con design reattivo, supporto per la modalità oscura e combinazione di colori vivaci.
Codice HTML
<div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center py-10">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="px-6 py-8">
<h2 class="text-center text-4xl font-extrabold text-gray-900 dark:text-white mb-4">Pro Plan</h2>
<p class="text-center text-gray-600 dark:text-gray-300 text-lg mb-8">Elevate your experience with advanced features.</p>
<div class="flex justify-center items-baseline mb-8">
<span class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400">$29</span>
<span class="text-2xl font-medium text-gray-500 dark:text-gray-400">/month</span>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-200 text-lg">Unlimited Projects</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-200 text-lg">Advanced Analytics</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-200 text-lg">24/7 Priority Support</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-200 text-lg">Custom Integrations</span>
</li>
</ul>
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
Get Started
</button>
</div>
</div>
</div>Componenti correlati
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi in stile 3D che supporta la modalità oscura e gli effetti reattivi, mostrando i dettagli del prezzo del prodotto.
Componente di visualizzazione del prezzo
Un complesso componente di visualizzazione dei prezzi progettato in stile scheumorfico che imita gli elementi del mondo reale, adatto per blog e consumo di contenuti con una combinazione di colori triadica e un design reattivo con supporto per la modalità oscura.
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.