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 de prix simple et réactif pour les annonces immobilières, avec des couleurs de terre et une prise en charge du mode sombre.
Composant d’affichage des prix
Composant d’affichage des prix de style 3D qui prend en charge le mode sombre et les effets réactifs, mettant en valeur les détails du prix du produit.
Composant d’affichage des prix
Un composant complexe d’affichage des prix de style rétro-vintage pour les portefeuilles, doté d’une palette de couleurs triadique, d’une réactivité et d’une prise en charge du mode sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.