Pricing Components

Pricing tables, comparison charts, and subscription cards to showcase your product pricing options.
1 COMPONENT VARIATIONS
Components
Simple Pricing Cards

A clean three-tier pricing table with highlighted popular plan.
Components
View
Simple Pricing Cards

A clean three-tier pricing table with highlighted popular plan.
Pricing Plans

Choose the perfect plan for your needs
Basic

$9 /month
10 Users
10GB Storage
Basic Support
Email Support
POPULAR
Pro

$29 /month
50 Users
100GB Storage
Priority Support
24/7 Phone Support
Advanced Analytics
Enterprise

$99 /month
Unlimited Users
1TB Storage
Dedicated Support
24/7 Phone Support
Custom Integrations
Advanced Security
Component Code

<div class="bg-white p-8 rounded-xl border border-gray-200">
  <div class="text-center mb-12">
    <h3 class="text-3xl font-bold text-gray-900">Pricing Plans</h3>
    <p class="text-gray-600 mt-2">Choose the perfect plan for your needs</p>
  </div>

  <div class="grid md:grid-cols-3 gap-8">
    <!-- Basic Plan -->
    <div class="border border-gray-200 rounded-xl p-6 bg-white">
      <div class="text-center">
        <h4 class="text-xl font-semibold text-gray-900">Basic</h4>
        <div class="mt-4 mb-6">
          <span class="text-5xl font-bold text-gray-900">$9</span>
          <span class="text-gray-600">/month</span>
        </div>
      </div>
      <ul class="space-y-3 mb-8">
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">10 Users</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">10GB Storage</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">Basic Support</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">Email Support</span>
        </li>
      </ul>
      <button class="w-full py-2 px-4 border border-gray-900 text-gray-900 hover:bg-gray-50 rounded-lg font-medium transition-colors">
        Get Started
      </button>
    </div>

    <!-- Pro Plan -->
    <div class="border-2 border-gray-900 rounded-xl p-6 bg-white relative">
      <div
        class="absolute top-0 right-0 bg-gray-900 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
        POPULAR
      </div>
      <div class="text-center">
        <h4 class="text-xl font-semibold text-gray-900">Pro</h4>
        <div class="mt-4 mb-6">
          <span class="text-5xl font-bold text-gray-900">$29</span>
          <span class="text-gray-600">/month</span>
        </div>
      </div>
      <ul class="space-y-3 mb-8">
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">50 Users</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">100GB Storage</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">Priority Support</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">24/7 Phone Support</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">Advanced Analytics</span>
        </li>
      </ul>
      <button class="w-full py-2 px-4 bg-gray-900 hover:bg-gray-800 text-white rounded-lg font-medium transition-colors">
        Get Started
      </button>
    </div>

    <!-- Enterprise Plan -->
    <div class="border border-gray-200 rounded-xl p-6 bg-white">
      <div class="text-center">
        <h4 class="text-xl font-semibold text-gray-900">Enterprise</h4>
        <div class="mt-4 mb-6">
          <span class="text-5xl font-bold text-gray-900">$99</span>
          <span class="text-gray-600">/month</span>
        </div>
      </div>
      <ul class="space-y-3 mb-8">
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">Unlimited Users</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">1TB Storage</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">Dedicated Support</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">24/7 Phone Support</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">Custom Integrations</span>
        </li>
        <li class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            class="text-blue-600 mr-2 flex-shrink-0 mt-0.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span class="text-gray-600">Advanced Security</span>
        </li>
      </ul>
      <button class="w-full py-2 px-4 border border-gray-900 text-gray-900 hover:bg-gray-50 rounded-lg font-medium transition-colors">
        Contact Sales
      </button>
    </div>
  </div>
</div>
Ready to Use These Components?

Copy the code and customize it to match your brand. These components are built with TailwindCSS and work seamlessly in any project.
Explore More Components