Pricing Components
Beautiful, responsive pricing components built with TailwindCSS and AlpineJS. Perfect for subscription plans, product pricing, and service tiers.
1. Pricing Cards
A set of pricing cards with features, perfect for subscription plans and service tiers.
Basic
$9
/month
Perfect for individuals getting started
- 5 Projects
- 10GB Storage
- Email Support
Most Popular
Pro
$29
/month
Best for growing teams
- Unlimited Projects
- 100GB Storage
- Priority Support
- Advanced Analytics
Enterprise
$99
/month
For large organizations
- Everything in Pro
- Unlimited Storage
- 24/7 Phone Support
- Custom Integrations
<!-- Pricing Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div class="bg-white border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-lg transition-shadow">
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-900">Basic</h3>
<div class="mt-4">
<span class="text-4xl font-bold text-gray-900">$9</span>
<span class="text-gray-600">/month</span>
</div>
<p class="mt-4 text-gray-600">Perfect for individuals getting started</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-600">5 Projects</span>
</li>
<li class="flex items-center">
<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>
<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="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>
<span class="text-gray-600">Email Support</span>
</li>
</ul>
<button class="mt-8 w-full bg-gray-100 text-gray-900 py-3 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div class="bg-white border-2 border-purple-600 rounded-lg p-8 shadow-lg relative">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="bg-purple-600 text-white px-4 py-1 rounded-full text-sm font-semibold">Most Popular</span>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-900">Pro</h3>
<div class="mt-4">
<span class="text-4xl font-bold text-gray-900">$29</span>
<span class="text-gray-600">/month</span>
</div>
<p class="mt-4 text-gray-600">Best for growing teams</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-600">Unlimited Projects</span>
</li>
<li class="flex items-center">
<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>
<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="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>
<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="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>
<span class="text-gray-600">Advanced Analytics</span>
</li>
</ul>
<button class="mt-8 w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-lg transition-shadow">
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-900">Enterprise</h3>
<div class="mt-4">
<span class="text-4xl font-bold text-gray-900">$99</span>
<span class="text-gray-600">/month</span>
</div>
<p class="mt-4 text-gray-600">For large organizations</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-600">Everything in Pro</span>
</li>
<li class="flex items-center">
<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>
<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="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>
<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="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>
<span class="text-gray-600">Custom Integrations</span>
</li>
</ul>
<button class="mt-8 w-full bg-gray-100 text-gray-900 py-3 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
Contact Sales
</button>
</div>
</div><template>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div class="bg-white border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-lg transition-shadow">
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-900">Basic</h3>
<div class="mt-4">
<span class="text-4xl font-bold text-gray-900">$9</span>
<span class="text-gray-600">/month</span>
</div>
<p class="mt-4 text-gray-600">Perfect for individuals getting started</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-600">5 Projects</span>
</li>
<li class="flex items-center">
<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>
<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="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>
<span class="text-gray-600">Email Support</span>
</li>
</ul>
<button class="mt-8 w-full bg-gray-100 text-gray-900 py-3 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div class="bg-white border-2 border-purple-600 rounded-lg p-8 shadow-lg relative">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="bg-purple-600 text-white px-4 py-1 rounded-full text-sm font-semibold">Most Popular</span>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-900">Pro</h3>
<div class="mt-4">
<span class="text-4xl font-bold text-gray-900">$29</span>
<span class="text-gray-600">/month</span>
</div>
<p class="mt-4 text-gray-600">Best for growing teams</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-600">Unlimited Projects</span>
</li>
<li class="flex items-center">
<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>
<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="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>
<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="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>
<span class="text-gray-600">Advanced Analytics</span>
</li>
</ul>
<button class="mt-8 w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-lg transition-shadow">
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-900">Enterprise</h3>
<div class="mt-4">
<span class="text-4xl font-bold text-gray-900">$99</span>
<span class="text-gray-600">/month</span>
</div>
<p class="mt-4 text-gray-600">For large organizations</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-600">Everything in Pro</span>
</li>
<li class="flex items-center">
<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>
<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="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>
<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="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>
<span class="text-gray-600">Custom Integrations</span>
</li>
</ul>
<button class="mt-8 w-full bg-gray-100 text-gray-900 py-3 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
Contact Sales
</button>
</div>
</div>
</template>export default function PricingCards() {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div className="bg-white border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-lg transition-shadow">
<div className="text-center">
<h3 className="text-lg font-semibold text-gray-900">Basic</h3>
<div className="mt-4">
<span className="text-4xl font-bold text-gray-900">$9</span>
<span className="text-gray-600">/month</span>
</div>
<p className="mt-4 text-gray-600">Perfect for individuals getting started</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">5 Projects</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">10GB Storage</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">Email Support</span>
</li>
</ul>
<button className="mt-8 w-full bg-gray-100 text-gray-900 py-3 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div className="bg-white border-2 border-purple-600 rounded-lg p-8 shadow-lg relative">
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span className="bg-purple-600 text-white px-4 py-1 rounded-full text-sm font-semibold">Most Popular</span>
</div>
<div className="text-center">
<h3 className="text-lg font-semibold text-gray-900">Pro</h3>
<div className="mt-4">
<span className="text-4xl font-bold text-gray-900">$29</span>
<span className="text-gray-600">/month</span>
</div>
<p className="mt-4 text-gray-600">Best for growing teams</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">Unlimited Projects</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">100GB Storage</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">Priority Support</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">Advanced Analytics</span>
</li>
</ul>
<button className="mt-8 w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div className="bg-white border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-lg transition-shadow">
<div className="text-center">
<h3 className="text-lg font-semibold text-gray-900">Enterprise</h3>
<div className="mt-4">
<span className="text-4xl font-bold text-gray-900">$99</span>
<span className="text-gray-600">/month</span>
</div>
<p className="mt-4 text-gray-600">For large organizations</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">Everything in Pro</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">Unlimited Storage</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">24/7 Phone Support</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-600">Custom Integrations</span>
</li>
</ul>
<button className="mt-8 w-full bg-gray-100 text-gray-900 py-3 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
Contact Sales
</button>
</div>
</div>
);
}2. Pricing Table
A comprehensive pricing table comparing features across different plans.
| Features | Basic |
Pro
Popular
|
Enterprise |
|---|---|---|---|
| Price |
$9
/month
|
$29
/month
|
$99
/month
|
| Projects | 5 | Unlimited | Unlimited |
| Storage | 10GB | 100GB | Unlimited |
| Support | Priority | 24/7 Phone | |
| Analytics | |||
| Custom Integrations | |||
<!-- Pricing Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Features</th>
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Basic</th>
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
<div class="flex flex-col items-center">
<span>Pro</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 mt-1">Popular</span>
</div>
</th>
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Enterprise</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Price</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">
<div class="text-2xl font-bold">$9</div>
<div class="text-gray-500">/month</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">
<div class="text-2xl font-bold">$29</div>
<div class="text-gray-500">/month</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">
<div class="text-2xl font-bold">$99</div>
<div class="text-gray-500">/month</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Projects</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">5</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Storage</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">10GB</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">100GB</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Support</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Email</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Priority</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">24/7 Phone</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Analytics</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-green-500 mx-auto" 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>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-green-500 mx-auto" 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>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Custom Integrations</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-green-500 mx-auto" 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>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"></td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm">
<button class="bg-gray-100 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-200 transition-colors">Get Started</button>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-purple-700 transition-colors">Get Started</button>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm">
<button class="bg-gray-100 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-200 transition-colors">Contact Sales</button>
</td>
</tr>
</tbody>
</table>
</div><template>
<!-- Pricing Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Features</th>
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Basic</th>
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
<div class="flex flex-col items-center">
<span>Pro</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 mt-1">Popular</span>
</div>
</th>
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Enterprise</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Price</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">
<div class="text-2xl font-bold">$9</div>
<div class="text-gray-500">/month</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">
<div class="text-2xl font-bold">$29</div>
<div class="text-gray-500">/month</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">
<div class="text-2xl font-bold">$99</div>
<div class="text-gray-500">/month</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Projects</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">5</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Storage</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">10GB</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">100GB</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Support</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Email</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Priority</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">24/7 Phone</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Analytics</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-green-500 mx-auto" 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>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-green-500 mx-auto" 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>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Custom Integrations</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg class="w-5 h-5 text-green-500 mx-auto" 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>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"></td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm">
<button class="bg-gray-100 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-200 transition-colors">Get Started</button>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-purple-700 transition-colors">Get Started</button>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm">
<button class="bg-gray-100 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-200 transition-colors">Contact Sales</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>export default function PricingTable() {
return (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Features</th>
<th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Basic</th>
<th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
<div className="flex flex-col items-center">
<span>Pro</span>
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 mt-1">Popular</span>
</div>
</th>
<th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Enterprise</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Price</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">
<div className="text-2xl font-bold">$9</div>
<div className="text-gray-500">/month</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">
<div className="text-2xl font-bold">$29</div>
<div className="text-gray-500">/month</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">
<div className="text-2xl font-bold">$99</div>
<div className="text-gray-500">/month</div>
</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Projects</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">5</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Storage</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">10GB</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">100GB</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Support</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Email</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Priority</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">24/7 Phone</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Analytics</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg className="w-5 h-5 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg className="w-5 h-5 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg className="w-5 h-5 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Custom Integrations</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg className="w-5 h-5 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg className="w-5 h-5 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
<svg className="w-5 h-5 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"></td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm">
<button className="bg-gray-100 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-200 transition-colors">Get Started</button>
</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm">
<button className="bg-purple-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-purple-700 transition-colors">Get Started</button>
</td>
<td className="px-6 py-4 whitespace-nowrap text-center text-sm">
<button className="bg-gray-100 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-200 transition-colors">Contact Sales</button>
</td>
</tr>
</tbody>
</table>
</div>
);
}3. Neo Brutalism Pricing
Bold, unapologetic pricing cards with thick black borders, offset shadows, and a raw, modern aesthetic.
Basic
$9
/month
Perfect for individuals getting started
- 5 Projects
- 10GB Storage
- Email Support
Pro
$29
/month
Best for growing teams
- Unlimited Projects
- 100GB Storage
- Priority Support
- Advanced Analytics
- Team Collaboration
Enterprise
$99
/month
For large organizations
- Everything in Pro
- Unlimited Storage
- 24/7 Phone Support
- Custom Integrations
<!-- Neo Brutalism Pricing -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div class="bg-white border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] transition-all">
<div class="text-center">
<h3 class="text-2xl font-black mb-4 uppercase tracking-wider">Basic</h3>
<div class="mt-4">
<span class="text-5xl font-black text-gray-900">$9</span>
<span class="text-gray-600 font-bold">/month</span>
</div>
<p class="mt-4 text-gray-600 font-medium">Perfect for individuals getting started</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">5 Projects</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">10GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Email Support</span>
</li>
</ul>
<button class="mt-8 w-full bg-black text-white py-4 px-6 font-black uppercase tracking-wider border-4 border-black hover:bg-[#ffde59] hover:text-black transition-colors">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div class="bg-[#ffde59] border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] transition-all">
<div class="text-center">
<h3 class="text-2xl font-black mb-4 uppercase tracking-wider">Pro</h3>
<div class="mt-4">
<span class="text-5xl font-black text-gray-900">$29</span>
<span class="text-gray-600 font-bold">/month</span>
</div>
<p class="mt-4 text-gray-600 font-medium">Best for growing teams</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Unlimited Projects</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">100GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Priority Support</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Advanced Analytics</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Team Collaboration</span>
</li>
</ul>
<button class="mt-8 w-full bg-black text-white py-4 px-6 font-black uppercase tracking-wider border-4 border-black hover:bg-white hover:text-black transition-colors">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] transition-all">
<div class="text-center">
<h3 class="text-2xl font-black mb-4 uppercase tracking-wider">Enterprise</h3>
<div class="mt-4">
<span class="text-5xl font-black text-gray-900">$99</span>
<span class="text-gray-600 font-bold">/month</span>
</div>
<p class="mt-4 text-gray-600 font-medium">For large organizations</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Everything in Pro</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Unlimited Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">24/7 Phone Support</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Custom Integrations</span>
</li>
</ul>
<button class="mt-8 w-full bg-black text-white py-4 px-6 font-black uppercase tracking-wider border-4 border-black hover:bg-[#ffde59] hover:text-black transition-colors">
Contact Sales
</button>
</div>
</div><template>
<!-- Neo Brutalism Pricing -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div class="bg-white border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] transition-all">
<div class="text-center">
<h3 class="text-2xl font-black mb-4 uppercase tracking-wider">Basic</h3>
<div class="mt-4">
<span class="text-5xl font-black text-gray-900">$9</span>
<span class="text-gray-600 font-bold">/month</span>
</div>
<p class="mt-4 text-gray-600 font-medium">Perfect for individuals getting started</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">5 Projects</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">10GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Email Support</span>
</li>
</ul>
<button class="mt-8 w-full bg-black text-white py-4 px-6 font-black uppercase tracking-wider border-4 border-black hover:bg-[#ffde59] hover:text-black transition-colors">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div class="bg-[#ffde59] border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] transition-all">
<div class="text-center">
<h3 class="text-2xl font-black mb-4 uppercase tracking-wider">Pro</h3>
<div class="mt-4">
<span class="text-5xl font-black text-gray-900">$29</span>
<span class="text-gray-600 font-bold">/month</span>
</div>
<p class="mt-4 text-gray-600 font-medium">Best for growing teams</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Unlimited Projects</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">100GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Priority Support</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Advanced Analytics</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Team Collaboration</span>
</li>
</ul>
<button class="mt-8 w-full bg-black text-white py-4 px-6 font-black uppercase tracking-wider border-4 border-black hover:bg-white hover:text-black transition-colors">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] transition-all">
<div class="text-center">
<h3 class="text-2xl font-black mb-4 uppercase tracking-wider">Enterprise</h3>
<div class="mt-4">
<span class="text-5xl font-black text-gray-900">$99</span>
<span class="text-gray-600 font-bold">/month</span>
</div>
<p class="mt-4 text-gray-600 font-medium">For large organizations</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Everything in Pro</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Unlimited Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">24/7 Phone Support</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-bold">Custom Integrations</span>
</li>
</ul>
<button class="mt-8 w-full bg-black text-white py-4 px-6 font-black uppercase tracking-wider border-4 border-black hover:bg-[#ffde59] hover:text-black transition-colors">
Contact Sales
</button>
</div>
</div>
</template>export default function NeoBrutalismPricing() {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div className="bg-white border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] transition-all">
<div className="text-center">
<h3 className="text-2xl font-black mb-4 uppercase tracking-wider">Basic</h3>
<div className="mt-4">
<span className="text-5xl font-black text-gray-900">$9</span>
<span className="text-gray-600 font-bold">/month</span>
</div>
<p className="mt-4 text-gray-600 font-medium">Perfect for individuals getting started</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">5 Projects</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">10GB Storage</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">Email Support</span>
</li>
</ul>
<button className="mt-8 w-full bg-black text-white py-4 px-6 font-black uppercase tracking-wider border-4 border-black hover:bg-[#ffde59] hover:text-black transition-colors">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div className="bg-[#ffde59] border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] transition-all">
<div className="text-center">
<h3 className="text-2xl font-black mb-4 uppercase tracking-wider">Pro</h3>
<div className="mt-4">
<span className="text-5xl font-black text-gray-900">$29</span>
<span className="text-gray-600 font-bold">/month</span>
</div>
<p className="mt-4 text-gray-600 font-medium">Best for growing teams</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">Unlimited Projects</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">100GB Storage</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">Priority Support</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">Advanced Analytics</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">Team Collaboration</span>
</li>
</ul>
<button className="mt-8 w-full bg-black text-white py-4 px-6 font-black uppercase tracking-wider border-4 border-black hover:bg-white hover:text-black transition-colors">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div className="bg-white border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] transition-all">
<div className="text-center">
<h3 className="text-2xl font-black mb-4 uppercase tracking-wider">Enterprise</h3>
<div className="mt-4">
<span className="text-5xl font-black text-gray-900">$99</span>
<span className="text-gray-600 font-bold">/month</span>
</div>
<p className="mt-4 text-gray-600 font-medium">For large organizations</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">Everything in Pro</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">Unlimited Storage</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">24/7 Phone Support</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-bold">Custom Integrations</span>
</li>
</ul>
<button className="mt-8 w-full bg-black text-white py-4 px-6 font-black uppercase tracking-wider border-4 border-black hover:bg-[#ffde59] hover:text-black transition-colors">
Contact Sales
</button>
</div>
</div>
);
}4. Glassmorphism Pricing
Modern glass-effect pricing cards with backdrop blur, transparency, and elegant gradients.
Basic
$9
/month
Perfect for individuals getting started
- 5 Projects
- 10GB Storage
- Email Support
Most Popular
Pro
$29
/month
Best for growing teams
- Unlimited Projects
- 100GB Storage
- Priority Support
- Advanced Analytics
- Team Collaboration
Enterprise
$99
/month
For large organizations
- Everything in Pro
- Unlimited Storage
- 24/7 Phone Support
- Custom Integrations
<!-- Glassmorphism Pricing -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div class="bg-gradient-to-br from-blue-500/20 to-cyan-500/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 shadow-xl hover:from-blue-500/30 hover:to-cyan-500/30 transition-all duration-300">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Basic</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$9</span>
<span class="text-gray-700 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-700">Perfect for individuals getting started</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">5 Projects</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">10GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Email Support</span>
</li>
</ul>
<button class="mt-8 w-full bg-white/20 backdrop-blur-sm border border-white/30 text-gray-900 py-4 px-6 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div class="bg-gradient-to-br from-purple-500/20 to-pink-500/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 shadow-xl hover:from-purple-500/30 hover:to-pink-500/30 transition-all duration-300 relative">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">Most Popular</span>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Pro</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$29</span>
<span class="text-gray-700 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-700">Best for growing teams</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Unlimited Projects</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">100GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Priority Support</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Advanced Analytics</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Team Collaboration</span>
</li>
</ul>
<button class="mt-8 w-full bg-white/20 backdrop-blur-sm border border-white/30 text-gray-900 py-4 px-6 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 shadow-xl hover:from-emerald-500/30 hover:to-teal-500/30 transition-all duration-300">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Enterprise</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$99</span>
<span class="text-gray-700 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-700">For large organizations</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Everything in Pro</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Unlimited Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">24/7 Phone Support</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Custom Integrations</span>
</li>
</ul>
<button class="mt-8 w-full bg-white/20 backdrop-blur-sm border border-white/30 text-gray-900 py-4 px-6 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300">
Contact Sales
</button>
</div>
</div><template>
<!-- Glassmorphism Pricing -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div class="bg-gradient-to-br from-blue-500/20 to-cyan-500/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 shadow-xl hover:from-blue-500/30 hover:to-cyan-500/30 transition-all duration-300">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Basic</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$9</span>
<span class="text-gray-700 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-700">Perfect for individuals getting started</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">5 Projects</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">10GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Email Support</span>
</li>
</ul>
<button class="mt-8 w-full bg-white/20 backdrop-blur-sm border border-white/30 text-gray-900 py-4 px-6 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div class="bg-gradient-to-br from-purple-500/20 to-pink-500/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 shadow-xl hover:from-purple-500/30 hover:to-pink-500/30 transition-all duration-300 relative">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">Most Popular</span>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Pro</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$29</span>
<span class="text-gray-700 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-700">Best for growing teams</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Unlimited Projects</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">100GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Priority Support</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Advanced Analytics</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Team Collaboration</span>
</li>
</ul>
<button class="mt-8 w-full bg-white/20 backdrop-blur-sm border border-white/30 text-gray-900 py-4 px-6 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 shadow-xl hover:from-emerald-500/30 hover:to-teal-500/30 transition-all duration-300">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Enterprise</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$99</span>
<span class="text-gray-700 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-700">For large organizations</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Everything in Pro</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Unlimited Storage</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">24/7 Phone Support</span>
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-900 font-medium">Custom Integrations</span>
</li>
</ul>
<button class="mt-8 w-full bg-white/20 backdrop-blur-sm border border-white/30 text-gray-900 py-4 px-6 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300">
Contact Sales
</button>
</div>
</div>
</template>export default function GlassmorphismPricing() {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div className="bg-gradient-to-br from-blue-500/20 to-cyan-500/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 shadow-xl hover:from-blue-500/30 hover:to-cyan-500/30 transition-all duration-300">
<div className="text-center">
<h3 className="text-2xl font-bold mb-4 text-gray-900">Basic</h3>
<div className="mt-4">
<span className="text-5xl font-bold text-gray-900">$9</span>
<span className="text-gray-700 font-medium">/month</span>
</div>
<p className="mt-4 text-gray-700">Perfect for individuals getting started</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">5 Projects</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">10GB Storage</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">Email Support</span>
</li>
</ul>
<button className="mt-8 w-full bg-white/20 backdrop-blur-sm border border-white/30 text-gray-900 py-4 px-6 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 shadow-xl hover:from-purple-500/30 hover:to-pink-500/30 transition-all duration-300 relative">
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">Most Popular</span>
</div>
<div className="text-center">
<h3 className="text-2xl font-bold mb-4 text-gray-900">Pro</h3>
<div className="mt-4">
<span className="text-5xl font-bold text-gray-900">$29</span>
<span className="text-gray-700 font-medium">/month</span>
</div>
<p className="mt-4 text-gray-700">Best for growing teams</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">Unlimited Projects</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">100GB Storage</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">Priority Support</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">Advanced Analytics</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">Team Collaboration</span>
</li>
</ul>
<button className="mt-8 w-full bg-white/20 backdrop-blur-sm border border-white/30 text-gray-900 py-4 px-6 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div className="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 shadow-xl hover:from-emerald-500/30 hover:to-teal-500/30 transition-all duration-300">
<div className="text-center">
<h3 className="text-2xl font-bold mb-4 text-gray-900">Enterprise</h3>
<div className="mt-4">
<span className="text-5xl font-bold text-gray-900">$99</span>
<span className="text-gray-700 font-medium">/month</span>
</div>
<p className="mt-4 text-gray-700">For large organizations</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">Everything in Pro</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">Unlimited Storage</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">24/7 Phone Support</span>
</li>
<li className="flex items-center">
<svg className="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-900 font-medium">Custom Integrations</span>
</li>
</ul>
<button className="mt-8 w-full bg-white/20 backdrop-blur-sm border border-white/30 text-gray-900 py-4 px-6 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300">
Contact Sales
</button>
</div>
</div>
);
}5. Sleek Pricing
Clean and modern pricing cards with subtle shadows and smooth hover effects.
Basic
$9
/month
Perfect for individuals getting started
- 5 Projects
- 10GB Storage
- Email Support
Most Popular
Pro
$29
/month
Best for growing teams
- Unlimited Projects
- 100GB Storage
- Priority Support
- Advanced Analytics
- Team Collaboration
Enterprise
$99
/month
For large organizations
- Everything in Pro
- Unlimited Storage
- 24/7 Phone Support
- Custom Integrations
<!-- Sleek Pricing -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Basic</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$9</span>
<span class="text-gray-600 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-600">Perfect for individuals getting started</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-700">5 Projects</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">10GB Storage</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Email Support</span>
</li>
</ul>
<button class="mt-8 w-full bg-gray-900 text-white py-4 px-6 rounded-lg font-semibold hover:bg-gray-800 transition-colors duration-300">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border-2 border-purple-200 relative">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="bg-purple-600 text-white px-4 py-2 rounded-full text-sm font-semibold">Most Popular</span>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Pro</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$29</span>
<span class="text-gray-600 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-600">Best for growing teams</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-700">Unlimited Projects</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">100GB Storage</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Priority Support</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Advanced Analytics</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Team Collaboration</span>
</li>
</ul>
<button class="mt-8 w-full bg-purple-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-purple-700 transition-colors duration-300">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Enterprise</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$99</span>
<span class="text-gray-600 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-600">For large organizations</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-700">Everything in Pro</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Unlimited Storage</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">24/7 Phone Support</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Custom Integrations</span>
</li>
</ul>
<button class="mt-8 w-full bg-gray-900 text-white py-4 px-6 rounded-lg font-semibold hover:bg-gray-800 transition-colors duration-300">
Contact Sales
</button>
</div>
</div><template>
<!-- Sleek Pricing -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Basic</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$9</span>
<span class="text-gray-600 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-600">Perfect for individuals getting started</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-700">5 Projects</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">10GB Storage</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Email Support</span>
</li>
</ul>
<button class="mt-8 w-full bg-gray-900 text-white py-4 px-6 rounded-lg font-semibold hover:bg-gray-800 transition-colors duration-300">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border-2 border-purple-200 relative">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="bg-purple-600 text-white px-4 py-2 rounded-full text-sm font-semibold">Most Popular</span>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Pro</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$29</span>
<span class="text-gray-600 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-600">Best for growing teams</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-700">Unlimited Projects</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">100GB Storage</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Priority Support</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Advanced Analytics</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Team Collaboration</span>
</li>
</ul>
<button class="mt-8 w-full bg-purple-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-purple-700 transition-colors duration-300">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4 text-gray-900">Enterprise</h3>
<div class="mt-4">
<span class="text-5xl font-bold text-gray-900">$99</span>
<span class="text-gray-600 font-medium">/month</span>
</div>
<p class="mt-4 text-gray-600">For large organizations</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<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>
<span class="text-gray-700">Everything in Pro</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Unlimited Storage</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">24/7 Phone Support</span>
</li>
<li class="flex items-center">
<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>
<span class="text-gray-700">Custom Integrations</span>
</li>
</ul>
<button class="mt-8 w-full bg-gray-900 text-white py-4 px-6 rounded-lg font-semibold hover:bg-gray-800 transition-colors duration-300">
Contact Sales
</button>
</div>
</div>
</template>export default function SleekPricing() {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl">
<!-- Basic Plan -->
<div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
<div className="text-center">
<h3 className="text-2xl font-bold mb-4 text-gray-900">Basic</h3>
<div className="mt-4">
<span className="text-5xl font-bold text-gray-900">$9</span>
<span className="text-gray-600 font-medium">/month</span>
</div>
<p className="mt-4 text-gray-600">Perfect for individuals getting started</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">5 Projects</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">10GB Storage</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">Email Support</span>
</li>
</ul>
<button className="mt-8 w-full bg-gray-900 text-white py-4 px-6 rounded-lg font-semibold hover:bg-gray-800 transition-colors duration-300">
Get Started
</button>
</div>
<!-- Pro Plan -->
<div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border-2 border-purple-200 relative">
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span className="bg-purple-600 text-white px-4 py-2 rounded-full text-sm font-semibold">Most Popular</span>
</div>
<div className="text-center">
<h3 className="text-2xl font-bold mb-4 text-gray-900">Pro</h3>
<div className="mt-4">
<span className="text-5xl font-bold text-gray-900">$29</span>
<span className="text-gray-600 font-medium">/month</span>
</div>
<p className="mt-4 text-gray-600">Best for growing teams</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">Unlimited Projects</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">100GB Storage</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">Priority Support</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">Advanced Analytics</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">Team Collaboration</span>
</li>
</ul>
<button className="mt-8 w-full bg-purple-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-purple-700 transition-colors duration-300">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
<div className="text-center">
<h3 className="text-2xl font-bold mb-4 text-gray-900">Enterprise</h3>
<div className="mt-4">
<span className="text-5xl font-bold text-gray-900">$99</span>
<span className="text-gray-600 font-medium">/month</span>
</div>
<p className="mt-4 text-gray-600">For large organizations</p>
</div>
<ul className="mt-8 space-y-4">
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">Everything in Pro</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">Unlimited Storage</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">24/7 Phone Support</span>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
<span className="text-gray-700">Custom Integrations</span>
</li>
</ul>
<button className="mt-8 w-full bg-gray-900 text-white py-4 px-6 rounded-lg font-semibold hover:bg-gray-800 transition-colors duration-300">
Contact Sales
</button>
</div>
</div>
);
}