Pricing Plans Section Component
A responsive, three-column pricing section with distinct plans, a highlighted 'Most Popular' option, and clear feature lists for easy comparison.
LTR
RTL
<section class="py-20 bg-gray-50 dark:bg-gray-800">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-16 text-center">
<h2 class="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white">
Simple, Transparent Pricing
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
Choose the perfect plan for your business needs. All plans include our core features with no hidden fees.
</p>
</div>
<div class="grid gap-8 mb-16 md:grid-cols-3">
<div class="transition-shadow duration-300 p-8 border border-gray-200 rounded-2xl bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
<div class="mb-8 text-center">
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
Starter
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Perfect for small businesses getting started
</p>
<div class="items-baseline justify-center flex">
<span class="text-4xl font-bold text-gray-900 dark:text-white">$</span><span class="text-5xl font-bold text-gray-900 dark:text-white">29</span><span class="ml-1 rtl:mr-1 rtl:ml-0 text-xl text-gray-600 dark:text-gray-300">/month</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Up to 5 team members</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">10GB cloud storage</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Basic analytics</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Email support</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">SSL certificate</span>
</li>
</ul>
<button class="transition-all duration-200 w-full px-6 py-3 border-2 border-gray-300 rounded-lg bg-transparent font-semibold text-gray-700 dark:border-blue-400 dark:text-blue-400">Get Started</button>
</div>
<div class="relative transition-shadow duration-300 transform p-8 border-2 border-blue-600 rounded-2xl bg-white shadow-xl dark:border-blue-400 dark:bg-gray-900">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="px-4 py-2 rounded-full bg-blue-600 text-sm font-medium text-white">Most Popular</span>
</div>
<div class="mb-8 text-center">
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
Professional
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Ideal for growing businesses and teams
</p>
<div class="items-baseline justify-center flex">
<span class="text-4xl font-bold text-gray-900 dark:text-white">$</span><span class="text-5xl font-bold text-gray-900 dark:text-white">79</span><span class="ml-1 rtl:mr-1 rtl:ml-0 text-xl text-gray-600 dark:text-gray-300">/month</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Up to 25 team members</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">100GB cloud storage</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Advanced analytics & reporting</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Priority support & live chat</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">API access & integrations</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Advanced security features</span>
</li>
</ul>
<button class="transform transition-all duration-200 w-full px-6 py-3 rounded-lg bg-blue-600 font-semibold text-white shadow-lg">Start Free Trial</button>
</div>
<div class="transition-shadow duration-300 p-8 border border-gray-200 rounded-2xl bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
<div class="mb-8 text-center">
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
Enterprise
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
For large organizations with custom needs
</p>
<div class="items-baseline justify-center flex">
<span class="text-4xl font-bold text-gray-900 dark:text-white">$</span><span class="text-5xl font-bold text-gray-900 dark:text-white">199</span><span class="ml-1 rtl:mr-1 rtl:ml-0 text-xl text-gray-600 dark:text-gray-300">/month</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Unlimited team members</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">1TB cloud storage</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Custom analytics & dashboards</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">24/7 dedicated support</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Advanced API & custom integrations</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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 dark:text-gray-300">Enterprise-grade security & compliance</span>
</li>
</ul>
<button class="transform transition-all duration-200 w-full px-6 py-3 rounded-lg bg-gray-900 font-semibold text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">Contact Sales</button>
</div>
</div>
</div>
</section>