定价表(Pricing Table)

在SaaS平台和订阅服务中,为了向用户清晰展示计划而设计的定价表(Pricing Table)区域。并排显示3个不同的计划,并采用强调推荐计划(如Pro等)的设计。

预览与代码

Pricing

为您的业务选择最佳计划

所有计划均提供14天免费试用。随时可以取消。

Basic

¥1,980/月

个人项目和小型团队的最佳选择。

  • 1个项目

  • 基础支持

  • 存储 10GB

最受欢迎

Pro

¥4,980/月

成长中团队和业务的最佳计划。

  • 无限项目

  • 优先支持

  • 存储 100GB

  • 高级分析功能

Enterprise

¥14,800/月

针对大型组织和高级需求定制。

  • 全部无限

  • 24/7 专属支持

  • 自定义存储

  • 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">
        为您的业务选择最佳计划
      </p>
      <p class="mt-4 text-xl text-gray-500">
        所有计划均提供14天免费试用。随时可以取消。
      </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">/月</span>
        </div>
        <p class="text-gray-500 mb-8">个人项目和小型团队的最佳选择。</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个项目
          </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>
            基础支持
          </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>
            存储 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">
          开始
        </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">
          最受欢迎
        </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">/月</span>
        </div>
        <p class="text-blue-100 mb-8">成长中团队和业务的最佳计划。</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>
            无限项目
          </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>
            优先支持
          </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>
            存储 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>
            高级分析功能
          </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">
          开始免费试用
        </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">/月</span>
        </div>
        <p class="text-gray-500 mb-8">针对大型组织和高级需求定制。</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>
            全部无限
          </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>
            24/7 专属支持
          </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>
            自定义存储
          </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>
            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">
          联系我们
        </button>
      </div>

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

实现要点