Composant d’affichage des prix
Composant d’affichage des prix de style Neumorphism avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<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>
Composants associés
Composant d’affichage des prix
Un composant d’affichage du prix minimaliste/plat pour une utilisation sur le tableau de bord, avec un design réactif et une prise en charge du mode sombre.
Composant d’affichage des prix
Un composant d’affichage des prix réactif pour un tableau de bord, avec des micro-interactions attrayantes et une palette de couleurs triadique, avec prise en charge du mode sombre.
Composant d’affichage des prix
Un composant d’affichage des prix de style Neumorphism avec une palette de couleurs complémentaires (orange doux et bleu clair), d’une complexité modérée pour le commerce électronique. Il présente un design réactif avec prise en charge du thème sombre. Le composant affiche une image, un titre et un prix du produit à l’aide d’un bouton « Ajouter au panier ». Le mode sombre utilise des couleurs complémentaires désaturées.