Bảng giá (Pricing Table)

Dưới đây là thiết kế UI cho section Bảng giá (Pricing Table) - một thành phần không thể thiếu đối với các sản phẩm SaaS hoặc các mô hình kinh doanh dạng đăng ký (subscription). Layout phân chia 3 gói dịch vụ một cách trực quan, đồng thời nhấn mạnh mạnh mẽ vào gói “Recommend” (ví dụ: gói Pro) để định hướng sự lựa chọn của người dùng.

Xem trước (Preview) & Mã nguồn (Source Code)

Pricing

Kế hoạch tối ưu nhất cho doanh nghiệp của bạn

Bạn có thể dùng thử 14 ngày miễn phí cho tất cả các gói. Có thể hủy bất kỳ lúc nào.

Basic

¥1,980/tháng

Tối ưu cho các dự án cá nhân hoặc nhóm nhỏ.

1 dự án
Hỗ trợ cơ bản
Lưu trữ 10GB

Phổ biến nhất

Pro

¥4,980/tháng

Gói tối ưu cho các nhóm và doanh nghiệp đang phát triển.

Không giới hạn số lượng dự án
Hỗ trợ ưu tiên
Lưu trữ 100GB
Chức năng phân tích nâng cao

Enterprise

¥14,800/tháng

Được tùy chỉnh cho các tổ chức quy mô lớn và yêu cầu cao.

Tất cả không giới hạn
Hỗ trợ chuyên trách 24/7/365
Lưu trữ tùy chỉnh
Cam kết SLA

<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Pricing</h2>
      <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
        Kế hoạch tối ưu nhất cho doanh nghiệp của bạn
      </p>
      <p class="mt-4 text-xl text-gray-500">
        Bạn có thể dùng thử 14 ngày miễn phí cho tất cả các gói. Có thể hủy bất kỳ lúc nào.
      </p>
    </div>

    <!-- Pricing Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
      
      <!-- Basic Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Basic</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥1,980</span>
          <span class="text-gray-500 ml-2">/tháng</span>
        </div>
        <p class="text-gray-500 mb-8">Tối ưu cho các dự án cá nhân hoặc nhóm nhỏ.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            1 dự án
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Hỗ trợ cơ bản
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Lưu trữ 10GB
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-medium rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
          Bắt đầu
        </button>
      </div>

      <!-- Pro Plan (Highlighted) -->
      <div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-600 p-8 transform md:-translate-y-4 relative">
        <div class="absolute top-0 right-0 -mt-4 mr-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">
          Phổ biến nhất
        </div>
        <h3 class="text-xl font-semibold text-white mb-4">Pro</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-white">¥4,980</span>
          <span class="text-blue-200 ml-2">/tháng</span>
        </div>
        <p class="text-blue-100 mb-8">Gói tối ưu cho các nhóm và doanh nghiệp đang phát triển.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" 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>
            Không giới hạn số lượng dự án
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" 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>
            Hỗ trợ ưu tiên
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" 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>
            Lưu trữ 100GB
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" 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>
            Chức năng phân tích nâng cao
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200">
          Bắt đầu dùng thử miễn phí
        </button>
      </div>

      <!-- Enterprise Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥14,800</span>
          <span class="text-gray-500 ml-2">/tháng</span>
        </div>
        <p class="text-gray-500 mb-8">Được tùy chỉnh cho các tổ chức quy mô lớn và yêu cầu cao.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Tất cả không giới hạn
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Hỗ trợ chuyên trách 24/7/365
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Lưu trữ tùy chỉnh
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Cam kết SLA
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-gray-900 font-medium rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
          Liên hệ
        </button>
      </div>

    </div>
  </div>
</div>

Điểm nhấn triển khai

Tạo phân cấp thị giác (Visual Hierarchy): Card cho gói Pro (gói “Chim mồi” / recommend) được cố tình tô màu nền xanh chủ đạo và đẩy trồi lên một chút bằng class transform md:-translate-y-4, qua đó ngay lập tức điều hướng ánh mắt của khách hàng.
Responsive hoàn hảo: Ứng dụng kỹ thuật grid-cols-1 md:grid-cols-3 của Tailwind, bảng giá sẽ tự động gập thành 1 cột trên giao diện mobile và dàn lại 3 cột ngang khi hiển thị trên các màn hình tablet/desktop rộng hơn.
Trải nghiệm Hover mượt mà: Việc bổ sung các util class như hover:shadow-lg transition-shadow duration-300 tạo ra cảm giác nhạy bén, các button/card phản hồi ngay lập tức và sinh động mỗi khi con trỏ chuột lướt qua.
Tiêu chuẩn Trợ năng (Accessibility): Hệ thống bảng màu được chọn lọc cẩn thận với độ tương phản cao, kết hợp giữa icons SVG và texts mạch lạc, giúp truyền tải những luồng thông tin phức tạp một cách rõ ràng, dễ hiểu nhất.