Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi reattivo con stile neumorfismo e combinazione di colori complementari, progettato per i contenuti del blog con supporto per la modalità scura.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<!-- Price Card -->
<div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<!-- Card Header -->
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Basic Plan</h3>
<span class="text-2xl font-bold text-blue-600 dark:text-teal-400">$29</span>
</div>
<!-- Card Features -->
<ul class="space-y-4 text-gray-700 dark:text-gray-300">
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" 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>10 Users</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" 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>50GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" 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>Email Support</span>
</li>
</ul>
<!-- Call to Action Button -->
<div class="mt-8">
<button class="w-full py-3 rounded-lg font-semibold text-white bg-blue-600 dark:bg-teal-600 shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark transition duration-300 hover:opacity-90">
Get Started
</button>
</div>
</div>
<!-- Custom Neumorphism Shadows (defined in CSS) -->
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
.shadow-neumorphic-button-light {
box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
}
</style>
</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 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.
Componente di visualizzazione del prezzo
Componente di visualizzazione dei prezzi in stile neumorfismo con effetti reattivi e supporto per temi scuri.