Pricing Tables
Pricing tables, comparison tables, and subscription cards to showcase your product pricing options.
4 COMPONENT VARIATIONS
Comparison Table Pricing
A detailed comparison table showing features across different plans with checkmarks and cross marks
View
Minimal Single Column Pricing
Clean, minimal single-column pricing layout perfect for simple product offerings.
View
Simple Three-Tier Pricing
A clean three-column pricing layout with highlighted popular plan and clear feature lists.
View
Subscription Cards with Features
Modern subscription cards with detailed feature lists and highlighted benefits for each tier.
View
Comparison Table Pricing
A detailed comparison table showing features across different plans with checkmarks and cross marks
Compare Plans
Choose the plan that fits your needs
| Features | Starter | Professional | Enterprise |
|---|---|---|---|
| Monthly Price | $19 | $49 | $99 |
| Projects | Up to 3 | Unlimited | Unlimited |
| Storage | 5GB | 100GB | 1TB |
| Team Members | Up to 10 | Unlimited | |
| Advanced Analytics | |||
| Priority Support |
Component Code
<div class="bg-white py-12">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-6xl">
Compare Plans
</h2>
<p class="mt-6 text-xl text-gray-600">
Choose the plan that fits your needs
</p>
</div>
<div class="mt-12 overflow-hidden">
<div class="relative">
<table class="w-full">
<thead>
<tr>
<th class="px-9 py-6 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
Features
</th>
<th class="px-9 py-6 text-center text-sm font-medium text-gray-500 uppercase tracking-wider">
Starter
</th>
<th class="px-9 py-6 text-center text-sm font-medium text-gray-500 uppercase tracking-wider bg-cyan-50 border-l-2 border-r-2 border-cyan-700">
Professional
</th>
<th class="px-9 py-6 text-center text-sm font-medium text-gray-500 uppercase tracking-wider">
Enterprise
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="bg-gray-50">
<td class="px-9 py-6 whitespace-nowrap text-sm font-medium text-gray-900">
Monthly Price
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
<span class="text-3xl font-bold">$19</span>
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900 bg-cyan-50 border-l-2 border-r-2 border-cyan-700">
<span class="text-3xl font-bold text-cyan-700">$49</span>
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
<span class="text-3xl font-bold">$99</span>
</td>
</tr>
<tr>
<td class="px-9 py-6 whitespace-nowrap text-sm font-medium text-gray-900">
Projects
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
Up to 3
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900 bg-cyan-50 border-l-2 border-r-2 border-cyan-700">
Unlimited
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
Unlimited
</td>
</tr>
<tr class="bg-gray-50">
<td class="px-9 py-6 whitespace-nowrap text-sm font-medium text-gray-900">
Storage
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
5GB
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900 bg-cyan-50 border-l-2 border-r-2 border-cyan-700">
100GB
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
1TB
</td>
</tr>
<tr>
<td class="px-9 py-6 whitespace-nowrap text-sm font-medium text-gray-900">
Team Members
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
<svg class="mx-auto h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900 bg-cyan-50 border-l-2 border-r-2 border-cyan-700">
Up to 10
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
Unlimited
</td>
</tr>
<tr class="bg-gray-50">
<td class="px-9 py-6 whitespace-nowrap text-sm font-medium text-gray-900">
Advanced Analytics
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
<svg class="mx-auto h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900 bg-cyan-50 border-l-2 border-r-2 border-cyan-700">
<svg class="mx-auto h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
<svg class="mx-auto h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</td>
</tr>
<tr>
<td class="px-9 py-6 whitespace-nowrap text-sm font-medium text-gray-900">
Priority Support
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
<svg class="mx-auto h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900 bg-cyan-50 border-l-2 border-r-2 border-cyan-700">
<svg class="mx-auto h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</td>
<td class="px-9 py-6 whitespace-nowrap text-center text-sm text-gray-900">
<svg class="mx-auto h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:gap-12">
<div class="text-center">
<a href="#" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white hover:bg-gray-900">
Choose Starter
</a>
</div>
<div class="text-center">
<a href="#" class="block w-full bg-cyan-700 border border-cyan-700 rounded-md py-3 text-sm font-semibold text-white hover:bg-cyan-800">
Choose Professional
</a>
</div>
<div class="text-center">
<a href="#" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white hover:bg-gray-900">
Choose Enterprise
</a>
</div>
</div>
</div>
</div>
</div>Minimal Single Column Pricing
Clean, minimal single-column pricing layout perfect for simple product offerings.
One Simple Price
Everything you need to get started, no hidden fees
$29
/month
Billed monthly, cancel anytime
Everything included
Unlimited projects
100GB storage
Team collaboration
Priority support
Advanced analytics
API access
Custom integrations
99.9% uptime SLA
Start Your Free Trial
14-day free trial, no credit card required
Need something custom? Contact our sales team
Component Code
<div class="bg-white py-12">
<div class="max-w-3xl mx-auto px-6 lg:px-12">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-6xl">
One Simple Price
</h2>
<p class="mt-6 text-xl text-gray-600">
Everything you need to get started, no hidden fees
</p>
</div>
<div class="mt-12 bg-gray-50 rounded-lg p-12">
<div class="text-center">
<div class="flex items-center justify-center">
<span class="text-6xl font-extrabold text-gray-900">$29</span>
<span class="text-xl font-medium text-gray-500 ml-3">/month</span>
</div>
<p class="mt-6 text-lg text-gray-500">
Billed monthly, cancel anytime
</p>
</div>
<div class="mt-12">
<h3 class="text-lg font-medium text-gray-900 text-center mb-9">
Everything included
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-base text-gray-700">Unlimited projects</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-base text-gray-700">100GB storage</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-base text-gray-700">Team collaboration</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-base text-gray-700">Priority support</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-base text-gray-700">Advanced analytics</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-base text-gray-700">API access</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-base text-gray-700">Custom integrations</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-base text-gray-700">99.9% uptime SLA</p>
</div>
</div>
</div>
<div class="mt-12 text-center">
<a href="#"
class="inline-flex items-center px-9 py-3 border border-transparent text-base font-medium rounded-md text-white bg-cyan-700 hover:bg-cyan-800">
Start Your Free Trial
</a>
<p class="mt-6 text-sm text-gray-500">
14-day free trial, no credit card required
</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-base text-gray-500">
Need something custom? <a href="#" class="font-medium text-cyan-700 hover:text-cyan-600">Contact our sales
team</a>
</p>
</div>
</div>
</div>Simple Three-Tier Pricing
A clean three-column pricing layout with highlighted popular plan and clear feature lists.
Choose Your Plan
Select the perfect plan for your business needs
Most Popular
Pro
Best for growing businesses
$29 /month
Get Started-
Unlimited projects
-
Priority support
-
100GB storage
-
Advanced analytics
Enterprise
For large organizations
$99 /month
Contact Sales-
Unlimited everything
-
24/7 dedicated support
-
Unlimited storage
-
Custom integrations
Component Code
<div class="bg-white py-12">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-6xl">
Choose Your Plan
</h2>
<p class="mt-6 text-xl text-gray-600">
Select the perfect plan for your business needs
</p>
</div>
<div class="mt-12 space-y-6 sm:mt-18 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-9 lg:max-w-6xl lg:mx-auto xl:gap-12">
<!-- Basic Plan -->
<div class="border border-gray-200 rounded-lg p-9">
<h3 class="text-lg leading-6 font-medium text-gray-900">Basic</h3>
<p class="mt-6 text-gray-500">Perfect for getting started</p>
<p class="mt-12">
<span class="text-6xl font-extrabold text-gray-900">$9</span>
<span class="text-base font-medium text-gray-500">/month</span>
</p>
<a href="#" class="mt-12 block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-gray-900">
Get Started
</a>
<ul class="mt-9 space-y-3">
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">Up to 5 projects</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">Basic support</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">1GB storage</p>
</li>
</ul>
</div>
<!-- Pro Plan -->
<div class="border-2 border-cyan-700 rounded-lg p-9 relative">
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="inline-flex px-6 py-1 rounded-full text-sm font-semibold bg-cyan-700 text-white">
Most Popular
</span>
</div>
<h3 class="text-lg leading-6 font-medium text-gray-900">Pro</h3>
<p class="mt-6 text-gray-500">Best for growing businesses</p>
<p class="mt-12">
<span class="text-6xl font-extrabold text-gray-900">$29</span>
<span class="text-base font-medium text-gray-500">/month</span>
</p>
<a href="#" class="mt-12 block w-full bg-cyan-700 border border-cyan-700 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-cyan-800">
Get Started
</a>
<ul class="mt-9 space-y-3">
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">Unlimited projects</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">Priority support</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">100GB storage</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">Advanced analytics</p>
</li>
</ul>
</div>
<!-- Enterprise Plan -->
<div class="border border-gray-200 rounded-lg p-9">
<h3 class="text-lg leading-6 font-medium text-gray-900">Enterprise</h3>
<p class="mt-6 text-gray-500">For large organizations</p>
<p class="mt-12">
<span class="text-6xl font-extrabold text-gray-900">$99</span>
<span class="text-base font-medium text-gray-500">/month</span>
</p>
<a href="#" class="mt-12 block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-gray-900">
Contact Sales
</a>
<ul class="mt-9 space-y-3">
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">Unlimited everything</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">24/7 dedicated support</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">Unlimited storage</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="ml-3 text-sm text-gray-700">Custom integrations</p>
</li>
</ul>
</div>
</div>
</div>
</div>Subscription Cards with Features
Modern subscription cards with detailed feature lists and highlighted benefits for each tier.
Subscription Plans
Everything you need to grow your business
Starter
$15
/mo
Perfect for small projects and personal use
What's included
- Up to 3 projects
- 5GB storage per project
- Basic templates
- Community support
Recommended
Professional
$49
/mo
Ideal for growing teams and businesses
Everything in Starter, plus
- Unlimited projects
- 100GB storage per project
- Premium templates
- Team collaboration
- Priority email support
- Advanced analytics
Enterprise
$149
/mo
Advanced features for large organizations
Everything in Professional, plus
- Unlimited storage
- Custom integrations
- Advanced security features
- Dedicated account manager
- 24/7 phone support
- SLA guarantee
Component Code
<div class="bg-gray-50 py-12">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-6xl">
Subscription Plans
</h2>
<p class="mt-6 text-xl text-gray-600">
Everything you need to grow your business
</p>
</div>
<div class="mt-12 space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-9">
<!-- Starter Plan -->
<div class="bg-white rounded-lg p-9 border border-gray-200">
<div class="flex items-center justify-between">
<h3 class="text-xl font-semibold text-gray-900">Starter</h3>
<div class="flex items-center">
<span class="text-3xl font-bold text-gray-900">$15</span>
<span class="text-gray-500 ml-1">/mo</span>
</div>
</div>
<p class="mt-6 text-gray-500">Perfect for small projects and personal use</p>
<div class="mt-9">
<h4 class="text-sm font-medium text-gray-900 uppercase tracking-wide">What's included</h4>
<ul class="mt-6 space-y-6">
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Up to 3 projects</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">5GB storage per project</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Basic templates</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Community support</span>
</li>
</ul>
</div>
<a href="#"
class="mt-12 block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-gray-900">
Start Free Trial
</a>
</div>
<!-- Professional Plan -->
<div class="bg-white rounded-lg p-9 border-2 border-cyan-700 relative">
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
<span class="bg-cyan-700 text-white px-6 py-1 text-sm font-medium rounded-full">
Recommended
</span>
</div>
<div class="flex items-center justify-between">
<h3 class="text-xl font-semibold text-gray-900">Professional</h3>
<div class="flex items-center">
<span class="text-3xl font-bold text-gray-900">$49</span>
<span class="text-gray-500 ml-1">/mo</span>
</div>
</div>
<p class="mt-6 text-gray-500">Ideal for growing teams and businesses</p>
<div class="mt-9">
<h4 class="text-sm font-medium text-gray-900 uppercase tracking-wide">Everything in Starter, plus</h4>
<ul class="mt-6 space-y-6">
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Unlimited projects</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">100GB storage per project</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Premium templates</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Team collaboration</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Priority email support</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Advanced analytics</span>
</li>
</ul>
</div>
<a href="#"
class="mt-12 block w-full bg-cyan-700 border border-cyan-700 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-cyan-800">
Start Free Trial
</a>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-lg p-9 border border-gray-200">
<div class="flex items-center justify-between">
<h3 class="text-xl font-semibold text-gray-900">Enterprise</h3>
<div class="flex items-center">
<span class="text-3xl font-bold text-gray-900">$149</span>
<span class="text-gray-500 ml-1">/mo</span>
</div>
</div>
<p class="mt-6 text-gray-500">Advanced features for large organizations</p>
<div class="mt-9">
<h4 class="text-sm font-medium text-gray-900 uppercase tracking-wide">Everything in Professional, plus</h4>
<ul class="mt-6 space-y-6">
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Unlimited storage</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Custom integrations</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Advanced security features</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">Dedicated account manager</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">24/7 phone support</span>
</li>
<li class="flex">
<svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-gray-500">SLA guarantee</span>
</li>
</ul>
</div>
<a href="#"
class="mt-12 block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-gray-900">
Contact Sales
</a>
</div>
</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