All Prompts
All Prompts
pricingpricing-tableplansfaqtailwindresponsivelanding-pageui-section
Responsive Pricing Table with FAQ Section
Адаптивная таблица цен с FAQ. Три тарифа (Starter, Pro, Enterprise) с бейджами, кнопками CTA и списком вопросов. Идеально для лендингов SaaS.
Prompt
<section class="mt-12">
<div class="text-center mb-8">
<h2 class="text-3xl md:text-4xl font-semibold tracking-tight text-slate-900">Simple, transparent pricing</h2>
<p class="mt-4 text-slate-600 max-w-2xl mx-auto">Choose the plan that fits your team's needs. All plans include our
core AI automation features with different scale and support levels.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Starter Plan -->
<div class="bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:shadow-md transition-all">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-slate-900">Starter</h3>
<div class="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full">Most Popular</div>
</div>
<div class="mb-6">
<div class="flex items-baseline">
<span class="text-3xl font-semibold text-slate-900">$29</span>
<span class="text-slate-600 ml-1">/month</span>
</div>
<p class="text-sm text-slate-500 mt-1">Per team, billed monthly</p>
</div>
<ul class="space-y-3 mb-6">
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Up to 5 team members</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">10,000 monthly interactions</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Basic automation workflows</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Email support</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Dashboard & analytics</span>
</li>
</ul>
<button class="w-full px-4 py-3 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition">
Start free trial
</button>
</div>
<!-- Professional Plan -->
<div class="bg-white rounded-2xl border-2 border-indigo-200 p-6 shadow-md relative">
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
<div class="px-4 py-1 bg-indigo-600 text-white text-xs font-medium rounded-full">Recommended</div>
</div>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-slate-900">Professional</h3>
<div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-indigo-600">
<path
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
class=""></path>
</svg>
</div>
</div>
<div class="mb-6">
<div class="flex items-baseline">
<span class="text-3xl font-semibold text-slate-900">$89</span>
<span class="text-slate-600 ml-1">/month</span>
</div>
<p class="text-sm text-slate-500 mt-1">Per team, billed monthly</p>
</div>
<ul class="space-y-3 mb-6">
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Up to 25 team members</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">100,000 monthly interactions</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Advanced automation + AI workflows</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Priority support + phone</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Custom integrations</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Advanced analytics & reporting</span>
</li>
</ul>
<button class="w-full px-4 py-3 bg-lg hover:bg-indigo-700 transition">
Start free trial
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:shadow-md transition-all">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-slate-900">Enterprise</h3>
<div class="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-slate-600">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
class=""></path>
</svg>
</div>
</div>
<div class="mb-6">
<div class="flex items-baseline">
<span class="text-3xl font-semibold text-slate-900">Custom</span>
</div>
<p class="text-sm text-slate-500 mt-1">Contact our sales team</p>
</div>
<ul class="space-y-3 mb-6">
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Unlimited team members</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Unlimited interactions</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">Enterprise AI & automation</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">24/7 dedicated support</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">SOC2 + custom compliance</span>
</li>
<li class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-500">
<path d="M20 6L9 17l-5-5" class=""></path>
</svg>
<span class="text-sm text-slate-700">On-premise deployment</span>
</li>
</ul>
<button class="w-full px-4 py-3 bg-white border border-gray-300 text-slate-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition">
Contact sales
</button>
</div>
</div>
<!-- FAQ Section -->
<div class="mt-12 max-w-4xl mx-auto">
<h3 class="text-xl font-semibold tracking-tight text-slate-900 text-center mb-8">Frequently asked questions</h3>
<div class="space-y-6">
<div class="bg-white rounded-lg border border-gray-200 p-6">
<h4 class="font-medium text-slate-900 mb-2">What happens when I exceed my interaction limit?</h4>
<p class="text-sm text-slate-600">We'll notify you before you reach your limit. You can upgrade your plan or
purchase additional interactions at $0.01 per interaction.</p>
</div>
<div class="bg-white rounded-lg border border-gray-200 p-6">
<h4 class="font-medium text-slate-900 mb-2">Can I change plans anytime?</h4>
<p class="text-sm text-slate-600">Yes, you can upgrade or downgrade your plan at any time. Changes take effect
immediately, and we'll prorate any billing adjustments.</p>
</div>
<div class="bg-white rounded-lg border border-gray-200 p-6">
<h4 class="font-medium text-slate-900 mb-2">Do you offer annual billing discounts?</h4>
<p class="text-sm text-slate-600">Yes! Save 20% when you pay annually. All annual plans include priority support
and additional integrations at no extra cost.</p>
</div>
</div>
</div>
</section>