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 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 22
Un componente minimalista per la visualizzazione dei prezzi che mostra l'immagine, il nome, il prezzo e un pulsante da aggiungere al carrello di un prodotto. Progettato con reattività e supporto per temi scuri utilizzando Tailwind CSS.
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi complesso e reattivo per una dashboard, con supporto per il tema scuro, che utilizza Tailwind CSS in un design piatto minimalista in scala di grigi.