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 22
Un composant d’affichage de prix minimaliste qui met en valeur l’image, le nom, le prix et un bouton d’un produit à ajouter au panier. Conçu avec une réactivité et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
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.
Composant d’affichage des prix
Un composant d’affichage des prix inspiré de la 3D avec une palette de couleurs monochromatiques, conçu pour les interfaces de médias sociaux. Il s’agit d’un composant complexe et réactif avec prise en charge du mode sombre, construit à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.