All Prompts
All Prompts
pricingtabletailwindinteractiveresponsivesaascomponentsection
Interactive Pricing Table with Plan/Billing Toggle
Интерактивная таблица цен с переключателем месячной/годовой оплаты. Адаптивный UI-компонент для SaaS-лендингов.
Prompt
<section
class="sm:px-6 lg:px-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll z-10 max-w-7xl mr-auto ml-auto pt-20 pr-4 pb-16 pl-4 relative"
id="pricing">
<div class="relative overflow-hidden rounded-3xl ring-1 ring-white/10 bg-neutral-950 backdrop-blur">
<!-- Subtle decor -->
<div class="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-white/5 blur-3xl"></div>
<div class="pointer-events-none absolute -left-24 -bottom-24 h-72 w-72 rounded-full bg-white/[0.04] blur-3xl"></div>
<div class="grid grid-cols-1 lg:grid-cols-2 items-stretch">
<!-- LEFT: Copy + Plan list -->
<div class="sm:p-10 flex flex-col pt-6 pr-6 pb-6 pl-6">
<!-- Eyebrow -->
<!-- Heading -->
<h2 class="sm:text-5xl md:text-5xl text-4xl font-semibold text-white tracking-tight mt-4">
Simple pricing
<span class="block">that grows with you</span>
</h2>
<p class="mt-4 text-base md:text-lg text-zinc-300/90 max-w-2xl">
Pick a plan today and switch anytime. Clear value across Starter, Pro, and Enterprise.
</p>
<!-- Segmented control (moved here under subtitle) -->
<div class="mt-6">
<div
class="inline-flex items-center gap-1 rounded-2xl border border-white/10 bg-white/[0.05] p-1 ring-1 ring-white/10">
<button data-billing="monthly" class="billing-tab px-3 py-1.5 text-[11px] rounded-lg uppercase tracking-tight text-white ring-1 ring-white/20 bg-white/[0.08] transition">
MONTHLY
</button>
<button data-billing="annual" class="billing-tab px-3 py-1.5 text-[11px] rounded-lg uppercase tracking-tight text-zinc-300 hover:text-white transition">
ANNUALLY
</button>
</div>
</div>
<!-- Plan list -->
<div class="mt-10 space-y-3">
<!-- Starter -->
<button data-plan-select="starter" class="plan-select-btn group hover:bg-white/[0.07] transition flex text-left bg-gradient-to-br from-white/10 to-white/0 w-full rounded-2xl ring-0 pt-5 pr-5 pb-5 pl-5 items-center justify-between" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 16px">
<div class="">
<p class="text-white text-lg tracking-tight font-semibold">Starter</p>
<p class="text-[12px] tracking-tight text-zinc-300 mt-1 uppercase">Launch fast, learn faster.</p>
</div>
<span class="inline-flex items-center justify-center h-9 w-9 rounded-full bg-white/5 ring-1 ring-white/10 text-zinc-200 group-hover:bg-white/10 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-[18px] h-[18px]">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</span>
</button>
<!-- Pro -->
<button data-plan-select="pro" class="plan-select-btn group hover:bg-white/[0.07] transition flex text-left bg-gradient-to-br from-white/10 to-white/0 w-full rounded-2xl ring-0 pt-5 pr-5 pb-5 pl-5 items-center justify-between" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 16px">
<div class="">
<p class="text-white text-lg tracking-tight font-semibold">Pro</p>
<p class="text-[12px] tracking-tight text-zinc-300 mt-1 uppercase">Grow with confidence.</p>
</div>
<span class="inline-flex items-center justify-center h-9 w-9 rounded-full bg-white/5 ring-1 ring-white/10 text-zinc-300 group-hover:text-zinc-100 group-hover:bg-white/10 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</span>
</button>
<!-- Enterprise -->
<button data-plan-select="enterprise" class="plan-select-btn group hover:bg-white/[0.07] transition flex text-left bg-gradient-to-br from-white/10 to-white/0 w-full rounded-2xl ring-0 pt-5 pr-5 pb-5 pl-5 items-center justify-between" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 16px">
<div>
<p class="text-white text-lg tracking-tight font-semibold">Enterprise</p>
<p class="text-[12px] tracking-tight text-zinc-300 mt-1 uppercase">Tailored for scale & security.</p>
</div>
<span class="inline-flex items-center justify-center h-9 w-9 rounded-full bg-white/5 ring-1 ring-white/10 text-zinc-300 group-hover:text-zinc-100 group-hover:bg-white/10 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</span>
</button>
</div>
<div class="mt-auto"></div>
</div>
<!-- RIGHT: Plan detail -->
<div
class="flex flex-col sm:p-8 bg-gradient-to-br from-white/0 via-white/10 to-white/0 max-w-xl rounded-2xl mt-8 mr-8 mb-8 ml-8 pt-6 pr-6 pb-6 pl-6 relative shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] gap-x-6 gap-y-6"
style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 16px">
<div class="pointer-events-none absolute inset-0 opacity-[0.05]"
style="background: radial-gradient(900px 360px at 20% -10%, rgba(255,255,255,0.12) 15%, transparent 60%);">
</div>
<!-- Header row (toggle removed here) -->
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<h3 id="planName" class="text-2xl text-white font-semibold tracking-tight text-center sm:text-left">Starter
</h3>
</div>
<!-- Price -->
<div class="flex flex-col sm:flex-row items-center sm:items-end justify-between gap-6">
<div class="flex items-end gap-2 justify-center sm:justify-start">
<span class="text-6xl text-white tracking-tight" id="planPrice">$19</span>
<span id="planPriceSuffix" class="text-zinc-300 mb-2 text-sm">/month</span>
</div>
<!-- CTA stays at bottom of Features -->
</div>
<!-- Tagline -->
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<p id="planTagline" class="text-[12px] tracking-tight text-zinc-200 uppercase text-center sm:text-left">
GREAT FOR SMALL TEAMS LAUNCHING THEIR FIRST WORKFLOWS.
</p>
<span id="savePill" class="hidden md:inline-flex items-center rounded-full border border-white/15 bg-white/[0.06] px-2 py-0.5 text-[11px] tracking-tight text-zinc-200">
Save 20%
</span>
</div>
<!-- Features -->
<div class="bg-gradient-to-br from-white/10 to-white/0 rounded-2xl pt-6 pr-6 pb-6 pl-6"
style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); --border-radius-before: 16px">
<ul id="featureList" class="space-y-3 text-sm text-zinc-100">
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-check mt-0.5 text-blue-400">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span>UP TO 5 PROJECTS</span>
</li>
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"
class="lucide lucide-check mt-0.5 text-blue-400">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="">BASIC AUTOMATIONS</span>
</li>
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-check mt-0.5 text-blue-400">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="">30-DAY RUN HISTORY</span>
</li>
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-check mt-0.5 text-blue-400">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span>EMAIL SUPPORT</span>
</li>
<!-- NEW -->
</ul>
<div class="mt-6 pt-4 border-t border-white/10 text-[12px] text-zinc-300/90 text-center sm:text-left">
Have special requirements? <a href="#contact"
class="underline decoration-white/30 hover:decoration-white">Talk to
sales</a>.
</div>
<!-- CTA at bottom -->
<div class="mt-6">
<a id="ctaBtn" href="#join"
class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white text-neutral-900 hover:bg-zinc-100 h-11 px-5 ring-1 ring-white/20 text-sm font-medium transition shadow-[0_8px_24px_-8px_rgba(255,255,255,0.25)]">
Get Started
</a>
</div>
</div>
</div>
</div>
<!-- Behavior -->
<script>
(function () {
const root = document.getElementById('pricing');
if (!root) return;
const state = { plan: 'starter', billing: 'monthly' };
const plans = {
starter: {
name: 'Starter',
tagline: 'Great for small teams launching their first workflows.',
priceMonthly: 299,
priceAnnual: 3190,
cta: { label: 'Get Started', href: '#join' },
features: [
'UP TO 5 PROJECTS',
'BASIC AUTOMATIONS',
'30-DAY RUN HISTORY',
'EMAIL SUPPORT'
]
},
pro: {
name: 'Pro',
tagline: 'Built for growing teams and production workloads.',
priceMonthly: 1499,
priceAnnual: 15990,
cta: { label: 'Upgrade to Pro', href: '#join' },
features: [
'UP TO 50 PROJECTS',
'ADVANCED AUTOMATIONS',
'PRIORITY QUEUING',
'ANALYTICS DASHBOARD',
'ROLES & PERMISSIONS',
'PRIORITY SUPPORT (24H)',
'POPULAR INTEGRATIONS'
]
},
enterprise: {
name: 'Enterprise',
tagline: 'Custom, secure, and ready for scale.',
priceMonthly: null,
priceAnnual: null,
cta: { label: 'Contact Sales', href: '#contact' },
features: [
'UNLIMITED PROJECTS & RUNS',
'DEDICATED SUCCESS MANAGER',
'SSO • RBAC • AUDIT LOGS',
'CUSTOM SECURITY & DATA RESIDENCY',
'PRIVATE CLOUD OR ON-PREM',
'24/7 PREMIUM SUPPORT',
'TAILORED SLAS & ONBOARDING'
]
}
};
const els = {
tabs: root.querySelectorAll('.billing-tab'),
planButtons: root.querySelectorAll('.plan-select-btn'),
planName: root.querySelector('#planName'),
planPrice: root.querySelector('#planPrice'),
planPriceSuffix: root.querySelector('#planPriceSuffix'),
planTagline: root.querySelector('#planTagline'),
featureList: root.querySelector('#featureList'),
ctaBtn: root.querySelector('#ctaBtn')
};
const checkSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-blue-400 mt-0.5"><path d="M20 6 9 17l-5-5"></path></svg>';
function formatPrice(v) {
return (typeof v === 'number') ? `$${v.toLocaleString()}` : 'Custom';
}
function setSelectedPlanButton() {
els.planButtons.forEach(btn => {
const isActive = btn.getAttribute('data-plan-select') === state.plan;
btn.classList.toggle('bg-white/[0.08]', isActive);
btn.classList.toggle('ring-1', isActive);
btn.classList.toggle('ring-white/20', isActive);
});
}
function setBillingTabs() {
els.tabs.forEach(tab => {
const active = tab.getAttribute('data-billing') === state.billing;
tab.classList.toggle('text-white', active);
tab.classList.toggle('text-zinc-300', !active);
tab.classList.toggle('bg-white/[0.08]', active);
tab.classList.toggle('ring-1', active);
tab.classList.toggle('ring-white/20', active);
});
}
function render() {
const cfg = plans[state.plan];
els.planName.textContent = cfg.name;
els.planTagline.textContent = cfg.tagline.toUpperCase();
const price = (state.billing === 'monthly') ? cfg.priceMonthly : cfg.priceAnnual;
els.planPrice.textContent = formatPrice(price);
els.planPriceSuffix.textContent = (typeof price === 'number') ? (state.billing === 'monthly' ? '/month' : '/yr') : '';
els.ctaBtn.textContent = cfg.cta.label;
els.ctaBtn.setAttribute('href', cfg.cta.href);
els.featureList.innerHTML = cfg.features.map(f => `<li class="flex items-start gap-2">${checkSVG}<span>${f}</span></li>`).join('');
setSelectedPlanButton();
setBillingTabs();
}
els.planButtons.forEach(btn => {
btn.addEventListener('click', () => {
state.plan = btn.getAttribute('data-plan-select');
render();
});
});
els.tabs.forEach(tab => {
tab.addEventListener('click', () => {
state.billing = tab.getAttribute('data-billing');
render();
});
});
render();
})();
</script>
</div>
</section>