Componente di visualizzazione del prezzo
Componente di visualizzazione dei prezzi in stile neumorfismo con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="w-full max-w-sm p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
<div class="flex justify-between items-center">
<h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200">Pro Plan</h3>
<span class="text-xl font-bold text-gray-600 dark:text-gray-300">$29</span>
</div>
<p class="text-gray-600 dark:text-gray-400 mt-2 text-sm">billed monthly</p>
<ul class="mt-4 space-y-2 text-gray-600 dark:text-gray-400">
<li class="flex items-center">
<svg class="h-5 w-5 mr-2 text-green-500" 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>Unlimited projects</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 mr-2 text-green-500" 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>10GB storage</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 mr-2 text-green-500" 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>Priority support</span>
</li>
</ul>
<button class="mt-6 w-full py-3 bg-blue-500 text-white rounded-md font-bold shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">
Choose Plan
</button>
</div>
</div>
<style>
.shadow-xl {
box-shadow: 10px 10px 20px #babecc, -10px -10px 20px #ffffff;
}
.dark .shadow-xl-dark {
box-shadow: 10px 10px 20px #718096, -10px -10px 20px #4a5568;
}
</style>
Componenti correlati
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 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 dal design minimalista/piatto per l'uso sul cruscotto, con design reattivo e supporto per la modalità oscura.