Une carte de tarification unique et moderne qui est mise en évidence au survol et comporte une section de tarification animée. C’est idéal lorsque vous souhaitez mettre en évidence un plan spécifique, comme sur l’écran de sélection du plan tarifaire.
Idéal pour les projets sérieux et une utilisation professionnelle.
transition-all duration-300 pour modifier en douceur les ombres et la position en survol.group-hover:scale-110 origin-left, lorsque vous survolez la carte entière, seule la partie prix sera légèrement agrandie en partant de la gauche, la rendant plus accrocheuse.bg-gradient-to-r from-blue-500 to-indigo-500 ou la couleur du bouton de survol hover:bg-blue-600 à la couleur de la marque (par exemple from-emerald-500 to-teal-500 pour la couleur verte). Vous pouvez facilement appliquer une couleur de thème en la changeant en hover:bg-emerald-600).hover:-translate-y-2, ou affiner la largeur d’expansion du prix en définissant group-hover:scale-110 sur 105, etc.<div class="pricing-card relative w-full max-w-sm rounded-2xl bg-white border border-slate-200 p-8 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:border-blue-500 overflow-hidden group">
<!-- Background Accent Line -->
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<!-- Header -->
<div class="mb-6">
<h3 class="text-xl font-bold text-slate-800 mb-2">Pro Plan</h3>
<p class="text-sm text-slate-500">Idéal pour les projets sérieux et une utilisation professionnelle.</p>
</div>
<!-- Price -->
<div class="mb-6 flex items-baseline">
<span class="text-4xl font-extrabold text-slate-900 transition-transform duration-300 group-hover:scale-110 origin-left inline-block">€49</span>
<span class="text-slate-500 ml-2">/ mois</span>
</div>
<!-- Features -->
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-slate-600">Création de projets illimités</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-slate-600">Fonctionnalités analytiques avancées</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-slate-600">Assistance prioritaire 24h/24, 7j/7</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-slate-600">connexion de domaine personnalisée</span>
</li>
</ul>
<!-- CTA Button -->
<button class="w-full py-3 px-4 bg-slate-900 hover:bg-blue-600 text-white font-medium rounded-xl transition-colors duration-300 focus:ring-4 focus:ring-blue-100 focus:outline-none">
Choisissez un forfait
</button>
</div>