Composant d’affichage des prix
Un composant d’affichage des prix ludique et joyeux avec des éléments arrondis et une palette de couleurs analogue, adapté à un portfolio pour présenter des travaux ou des produits. Il est entièrement réactif et prend en charge le mode sombre.
HTML Code
<div class="font-sans antialiased p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100 dark:from-purple-900 dark:via-pink-900 dark:to-rose-900 min-h-screen flex items-center justify-center">
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Pricing Card 1: Basic -->
<div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-purple-300 dark:border-purple-600 group">
<div class="p-6 sm:p-8 text-center bg-purple-200 dark:bg-purple-700 rounded-t-3xl">
<h3 class="text-2xl sm:text-3xl font-extrabold text-purple-900 dark:text-purple-100 mb-2">Starter</h3>
<p class="text-purple-700 dark:text-purple-200 text-base sm:text-lg">Perfect for hobbyists & individuals.</p>
</div>
<div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
<div class="text-5xl sm:text-6xl font-extrabold text-pink-600 dark:text-pink-400 mb-4">
<span class="text-3xl sm:text-4xl align-top text-pink-500 dark:text-pink-300">$</span>19
<span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
</div>
<ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>5 Project Spaces</li>
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>10GB Storage</li>
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Basic Support</li>
</ul>
</div>
<div class="p-6 sm:p-8 pt-0">
<button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-pink-500 dark:bg-pink-400 hover:bg-pink-600 dark:hover:bg-pink-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600">
Choose Plan
</button>
</div>
</div>
<!-- Pricing Card 2: Pro (Recommended) -->
<div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-rose-400 dark:border-rose-700 scale-105 relative z-10 group">
<div class="absolute -top-3 right-0 bg-rose-500 dark:bg-rose-600 text-white dark:text-gray-100 text-xs sm:text-sm font-bold px-4 py-1.5 rounded-bl-lg rounded-tr-3xl shadow-md transform rotate-3 origin-top-right">Most Popular</div>
<div class="p-6 sm:p-8 text-center bg-rose-300 dark:bg-rose-800 rounded-t-3xl">
<h3 class="text-2xl sm:text-3xl font-extrabold text-rose-900 dark:text-rose-100 mb-2">Pro</h3>
<p class="text-rose-700 dark:text-rose-200 text-base sm:text-lg">For growing teams & ambitious projects.</p>
</div>
<div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
<div class="text-5xl sm:text-6xl font-extrabold text-orange-600 dark:text-orange-400 mb-4">
<span class="text-3xl sm:text-4xl align-top text-orange-500 dark:text-orange-300">$</span>49
<span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
</div>
<ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Unlimited Projects</li>
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>100GB Storage</li>
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Priority Support</li>
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Custom Domains</li>
</ul>
</div>
<div class="p-6 sm:p-8 pt-0">
<button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 hover:bg-orange-600 dark:hover:bg-orange-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
Get Started Now
</button>
</div>
</div>
<!-- Pricing Card 3: Enterprise -->
<div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-yellow-300 dark:border-yellow-600 group">
<div class="p-6 sm:p-8 text-center bg-yellow-200 dark:bg-yellow-700 rounded-t-3xl">
<h3 class="text-2xl sm:text-3xl font-extrabold text-yellow-900 dark:text-yellow-100 mb-2">Enterprise</h3>
<p class="text-yellow-700 dark:text-yellow-200 text-base sm:text-lg">Scale your business with dedicated support.</p>
</div>
<div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
<div class="text-5xl sm:text-6xl font-extrabold text-green-600 dark:text-green-400 mb-4">
<span class="text-3xl sm:text-4xl align-top text-green-500 dark:text-green-300">$</span>99
<span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
</div>
<ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>All Pro Features</li>
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Dedicated Account Manager</li>
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Premium Support</li>
<li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Custom Integrations</li>
</ul>
</div>
<div class="p-6 sm:p-8 pt-0">
<button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 hover:bg-green-600 dark:hover:bg-green-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600">
Contact Sales
</button>
</div>
</div>
</div>
</div>Composants associés
Composant d’affichage des prix
Un composant complexe d’affichage des prix conçu dans un style skeuomorphe imitant les éléments du monde réel, adapté aux blogs et à la consommation de contenu avec une palette de couleurs triadique et un design réactif avec prise en charge du mode sombre.
Composant d’affichage des prix
Un composant d’affichage de prix réactif avec une esthétique rétro/vintage et des couleurs vives, adapté aux interfaces de médias sociaux, avec prise en charge du mode sombre.
Composant d’affichage des prix
Composant d’affichage des prix avec un design réactif, la prise en charge du mode sombre et une palette de couleurs vives.