Animierte Pricing-Karte

Eine moderne Einzelpreiskarte, die beim Bewegen des Mauszeigers hervorgehoben wird und über einen animierten Preisabschnitt verfügt. Dies ist ideal, wenn Sie einen bestimmten Plan hervorheben möchten, beispielsweise auf dem Preisplan-Auswahlbildschirm.

Vorschau

Pro Plan

Ideal für ernsthafte Projekte und den geschäftlichen Einsatz.

€49/ Monat

Unbegrenzte Projekterstellung
Erweiterte Analysefunktionen
24/7 Vorrangiger Support
benutzerdefinierte Domänenverbindung

Anwendungsfälle und Funktionen

SaaS- und Service-Preisliste: Geeignet zum Hervorheben des am meisten empfohlenen Plans oder des Plans, über den der Benutzer beim Anordnen mehrerer Pläne gefahren ist.
Visuelles Feedback: Beim Schweben wird die gesamte Karte angehoben und oben erscheint eine farbige Akzentlinie. Darüber hinaus wird der Preisbereich vergrößert, um die Aufmerksamkeit des Benutzers auf den Preis zu lenken.

Kernpunkte von Design und UX (Design & UX)

Flüssige Animation: Verwenden Sie „transition-all duration-300“, um Schatten und Position beim Schweben sanft zu ändern.
Preisbetonung: Durch die Verwendung der Klasse „group-hover:scale-110 origin-left“ wird, wenn Sie mit der Maus über die gesamte Karte fahren, nur der Preisteil von links beginnend leicht vergrößert, was ihn auffälliger macht.
Sauberes Layout: Die Ränder (Padding) und die Textfarbe (Slate-Stil) sind entsprechend eingestellt, um ein modernes Design zu schaffen, das die Lesbarkeit der Informationen erleichtert.

So passen Sie es an (Anpassungsanleitung)

Farbthema ändern: „bg-gradient-to-r from-blue-500 to-indigo-500“ oder Button-Hover-Farbe „hover:bg-blue-600“ zur Markenfarbe (z. B. „from-emerald-500 to-teal-500“ für grüne Farbe). Sie können eine Designfarbe einfach anwenden, indem Sie sie in „hover:bg-emerald-600“ ändern.
Animationsanpassung: Sie können die schwebende Höhe ändern, indem Sie den Wert von „hover:-translate-y-2“ ändern, oder die Erweiterungsbreite des Preises feinabstimmen, indem Sie „group-hover:scale-110“ auf „105“ usw. setzen.

Implementierungscode (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">Ideal für ernsthafte Projekte und den geschäftlichen Einsatz.</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">/ Monat</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">Unbegrenzte Projekterstellung</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">Erweiterte Analysefunktionen</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">24/7 Vorrangiger Support</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">benutzerdefinierte Domänenverbindung</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">
  Wählen Sie einen Plan
</button>
</div>

Browser-Unterstützung

Funktioniert gut mit den neuesten Versionen moderner Browser (Chrome, Firefox, Safari, Edge).
Es nutzt die „Gruppen-Hover“-Funktion von Tailwind CSS, sodass kein spezielles JavaScript erforderlich ist.��