Một thẻ định giá duy nhất hiện đại được làm nổi bật khi di chuột và có phần định giá sinh động. Điều này lý tưởng khi bạn muốn làm nổi bật một gói cụ thể, chẳng hạn như trên màn hình chọn gói giá.
Lý tưởng cho các dự án nghiêm túc và sử dụng kinh doanh.
transition-all duration-300 để thay đổi bóng và vị trí một cách trơn tru khi di chuột.group-hover:scale-110 origin-left, khi bạn di chuột qua toàn bộ thẻ, chỉ có phần giá sẽ được phóng to một chút bắt đầu từ bên trái, khiến nó bắt mắt hơn.bg-gradient-to-r from-blue-500 to-indigo-500 hoặc màu di chuột của nút hover:bg-blue-600 thành màu thương hiệu (ví dụ: from-emerald-500 to-teal-500 cho màu xanh lá cây) Bạn có thể dễ dàng áp dụng màu chủ đề bằng cách thay đổi nó thành hover:bg-emerald-600).hover:-translate-y-2 hoặc tinh chỉnh độ rộng mở rộng của giá bằng cách đặt group-hover:scale-110 thành 105, v.v.<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">Lý tưởng cho các dự án nghiêm túc và sử dụng kinh doanh.</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">¥4,980</span>
<span class="text-slate-500 ml-2">/ 月</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">dự án không giới hạn作成</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">高度なphân tích機能</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時間365日のHỗ trợ ưu tiên</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">kết nối miền tùy chỉnh</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">
Chọn một kế hoạch
</button>
</div>group-hover của Tailwind CSS, do đó không cần phải có JavaScript đặc biệt.