Card Bảng Giá Động

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

Xem trước

Pro Plan

Lý tưởng cho các dự án nghiêm túc và sử dụng kinh doanh.

¥4,980/ 月

dự án không giới hạn作成
高度なphân tích機能
24時間365日のHỗ trợ ưu tiên
kết nối miền tùy chỉnh

Trường hợp sử dụng & Tính năng

SaaS và bảng giá dịch vụ: Thích hợp để làm nổi bật gói được đề xuất nhiều nhất hoặc gói mà người dùng di chuột qua khi sắp xếp nhiều gói.
Phản hồi trực quan: Toàn bộ thẻ sẽ hiển thị khi di chuột và một đường nhấn đầy màu sắc xuất hiện ở trên cùng. Ngoài ra, phần giá sẽ được thu nhỏ lại để thu hút sự chú ý của người dùng về giá.

Những điểm chính của thiết kế và UX (Design & UX)

Hoạt ảnh mượt mà: Sử dụng transition-all duration-300 để thay đổi bóng và vị trí một cách trơn tru khi di chuột.
Nhấn mạnh về giá: Bằng cách sử dụng lớp 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.
Bố cục gọn gàng: Lề (Padding) và màu văn bản (kiểu Slate) được đặt phù hợp để tạo ra một thiết kế hiện đại giúp thông tin dễ đọc.

Cách tùy chỉnh (Hướng dẫn tùy chỉnh)

Thay đổi chủ đề màu: 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).
Điều chỉnh hoạt ảnh: Bạn có thể thay đổi chiều cao nổi bằng cách thay đổi giá trị của 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.

mã thực hiện (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">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>

Hỗ trợ trình duyệt

Hoạt động tốt với các phiên bản mới nhất của trình duyệt hiện đại (Chrome, Firefox, Safari, Edge).
Nó tận dụng tính năng group-hover của Tailwind CSS, do đó không cần phải có JavaScript đặc biệt.