Carte de prix animée

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.

Aperçu

Pro Plan

Idéal pour les projets sérieux et une utilisation professionnelle.

€49/ mois

Création de projets illimités
Fonctionnalités analytiques avancées
Assistance prioritaire 24h/24, 7j/7
connexion de domaine personnalisée

Cas d’utilisation et fonctionnalités

Liste de prix SaaS et services : convient pour mettre en évidence le plan le plus recommandé ou le plan sur lequel l’utilisateur a survolé lors de la configuration de plusieurs plans.
Commentaire visuel : la carte entière se soulève au survol et une ligne d’accent colorée apparaît en haut. De plus, la section prix sera agrandie pour attirer l’attention de l’utilisateur sur le prix.

Points clés du design et de l’UX (Design & UX)

Animation fluide : utilisez transition-all duration-300 pour modifier en douceur les ombres et la position en survol.
Emphase sur le prix : en utilisant la classe 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.
Mise en page épurée : les marges (Remplissage) et la couleur du texte (style Slate) sont définies de manière appropriée pour créer un design moderne qui rend les informations faciles à lire.

Comment personnaliser (Guide de personnalisation)

Changer le thème de couleur : 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).
Ajustement de l’animation : Vous pouvez modifier la hauteur flottante en modifiant la valeur de hover:-translate-y-2, ou affiner la largeur d’expansion du prix en définissant group-hover:scale-110 sur 105, etc.

code d’implémentation (Implementation)

<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>

Prise en charge du navigateur

Fonctionne bien avec les dernières versions des navigateurs modernes (Chrome, Firefox, Safari, Edge).
Il exploite la fonctionnalité « group-hover » de Tailwind CSS, donc aucu