Animated Pricing Tier Card

A modern single pricing card that is highlighted on hover and has an animated pricing section. This is ideal when you want to highlight a specific plan, such as on the price plan selection screen.

Preview

Pro Plan

Ideal for serious projects and business use.

$49/ month

Unlimited project creation
Advanced analytics features
24/7 Priority support
custom domain connection

Use Cases & Features

SaaS and service price list: Suitable for highlighting the most recommended plan or the plan the user hovered over when arranging multiple plans.
Visual Feedback: The entire card lifts up on hover and a colorful accent line appears at the top. In addition, the price section will be scaled up to draw the user’s attention to the price.

Key points of design and UX (Design & UX)

Smooth animation: Use transition-all duration-300 to smoothly change shadows and position on hover.
Price emphasis: By using the group-hover:scale-110 origin-left class, when you hover over the entire card, only the price part will be slightly enlarged starting from the left, making it more eye-catching.
Clean layout: The margins (Padding) and text color (Slate style) are set appropriately to create a modern design that makes information easy to read.

How to customize (Customization Guide)

Change color theme: bg-gradient-to-r from-blue-500 to-indigo-500 or button hover color hover:bg-blue-600 to brand color (e.g. from-emerald-500 to-teal-500 for green color) You can easily apply a theme color by changing it to hover:bg-emerald-600).
Animation adjustment: You can change the floating height by changing the value of hover:-translate-y-2, or fine-tune the expansion width of the price by setting group-hover:scale-110 to 105, etc.

implementation code (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 for serious projects and business use.</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">/ month</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">Unlimited project creation</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">Advanced analytics features</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 Priority 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">custom domain connection</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">
  Choose a plan
</button>
</div>

Browser Support

Works well with the latest versions of modern browsers (Chrome, Firefox, Safari, Edge).
It leverages the group-hover feature of Tailwind CSS, so no special JavaScript is required.��