Voici une section de tableau de tarification idéale pour les plateformes SaaS et les services d’abonnement, permettant de présenter clairement vos différentes offres aux utilisateurs. Ce composant est structuré pour afficher trois forfaits côte à côte, tout en mettant visuellement en évidence l’offre recommandée (par exemple, le forfait Pro).
Le meilleur forfait pour votre entreprise
Un essai gratuit de 14 jours est disponible pour tous les forfaits. Vous pouvez annuler à tout moment.
Parfait pour les projets personnels et les petites équipes.
1 projet
Support de base
10 Go de stockage
Le plus populaire
Le meilleur forfait pour les équipes et les entreprises en pleine croissance.
Projets illimités
Support prioritaire
100 Go de stockage
Fonctionnalités d’analyse avancées
Personnalisé pour les grandes organisations avec des exigences avancées.
Tout illimité
Support dédié 24h/24 et 7j/7
Stockage personnalisé
Garantie SLA
<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-sans">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Pricing</h2>
<p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
Le meilleur forfait pour votre entreprise
</p>
<p class="mt-4 text-xl text-gray-500">
Un essai gratuit de 14 jours est disponible pour tous les forfaits. Vous pouvez annuler à tout moment.
</p>
</div>
<!-- Pricing Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
<!-- Basic Plan -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Basic</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-gray-900">¥1,980</span>
<span class="text-gray-500 ml-2">/mois</span>
</div>
<p class="text-gray-500 mb-8">Parfait pour les projets personnels et les petites équipes.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
1 projet
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
Support de base
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
10 Go de stockage
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-blue-600 font-medium rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
Commencer
</button>
</div>
<!-- Pro Plan (Highlighted) -->
<div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-600 p-8 transform md:-translate-y-4 relative">
<div class="absolute top-0 right-0 -mt-4 mr-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">
Le plus populaire
</div>
<h3 class="text-xl font-semibold text-white mb-4">Pro</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-white">¥4,980</span>
<span class="text-blue-200 ml-2">/mois</span>
</div>
<p class="text-blue-100 mb-8">Le meilleur forfait pour les équipes et les entreprises en pleine croissance.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" 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>
Projets illimités
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" 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>
Support prioritaire
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" 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>
100 Go de stockage
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" 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>
Fonctionnalités d'analyse avancées
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200">
Commencer l'essai gratuit
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-gray-900">¥14,800</span>
<span class="text-gray-500 ml-2">/mois</span>
</div>
<p class="text-gray-500 mb-8">Personnalisé pour les grandes organisations avec des exigences avancées.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
Tout illimité
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
Support dédié 24h/24 et 7j/7
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
Stockage personnalisé
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
Garantie SLA
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-gray-900 font-medium rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
Nous contacter
</button>
</div>
</div>
</div>
</div>Pro (généralement le plus populaire) arbore une couleur d’arrière-plan distincte et un léger décalage vers le haut (transform md:-translate-y-4) pour capter immédiatement le regard.grid-cols-1 md:grid-cols-3, les forfaits s’empilent proprement sur une seule colonne sur mobile, puis s’alignent sur trois colonnes sur tablette et ordinateur.hover:shadow-lg transition-shadow duration-300 enrichit l’expérience utilisateur en conférant une belle interactivité à chaque carte.