Pricing Table

<div class="py-20 px-6 bg-gray-50">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); * { font-family: 'Inter', 'Helvetica Neue', sans-serif; }</style>
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">Choose the perfect plan for your team size and needs.</p>
      <div class="inline-flex bg-white p-1 rounded-lg border border-gray-200">
        <button class="px-6 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900">Monthly</button>
        <button class="px-6 py-2 rounded-md text-sm font-medium bg-blue-600 text-white">Yearly</button>
      </div>
    </div>
    <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
      <div class="bg-white p-8 rounded-xl border border-gray-200 shadow-sm">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Starter</h3>
        <div class="mb-6">
          <span class="text-4xl font-bold text-gray-900">$9</span>
          <span class="text-gray-600">/month</span>
        </div>
        <ul class="space-y-3 mb-8">
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">Up to 5 team members</span>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">10GB storage</span>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">Email support</span>
          </li>
        </ul>
        <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 px-6
          rounded-lg font-semibold transition-colors duration-200">Get Started</button>
      </div>
      <div class="bg-white p-8 rounded-xl border-2 border-blue-600 shadow-lg relative">
        <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
          <span class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium">Most Popular</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Professional</h3>
        <div class="mb-6">
          <span class="text-4xl font-bold text-gray-900">$29</span>
          <span class="text-gray-600">/month</span>
        </div>
        <ul class="space-y-3 mb-8">
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">Up to 25 team members</span>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">100GB storage</span>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">Priority support</span>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">Advanced analytics</span>
          </li>
        </ul>
        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-6
          rounded-lg font-semibold transition-colors duration-200">Start Free Trial</button>
      </div>
      <div class="bg-white p-8 rounded-xl border border-gray-200 shadow-sm">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
        <div class="mb-6">
          <span class="text-4xl font-bold text-gray-900">$99</span>
          <span class="text-gray-600">/month</span>
        </div>
        <ul class="space-y-3 mb-8">
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">Unlimited team members</span>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">Unlimited storage</span>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">24/7 phone support</span>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
            </svg>
            <span class="text-gray-600">Custom integrations</span>
          </li>
        </ul>
        <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 px-6
          rounded-lg font-semibold transition-colors duration-200">Contact Sales</button>
      </div>
    </div>
  </div>
</div>