All Prompts
All Prompts
pricingtabletailwindresponsiveinteractivesaasjavascript
Interactive Pricing Table with Segment & Billing Toggle
Интерактивная таблица цен для SaaS: переключатель сегментов (личный/бизнес) и тарифов (месяц/год). Адаптивный дизайн, JS-обновление цен.
Prompt
<div class="relative max-w-7xl mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
<!-- Header -->
<div class="relative text-center max-w-4xl mx-auto">
<h2 class="sm:text-5xl lg:text-6xl text-4xl font-semibold text-white tracking-tight">
Pricing
</h2>
<p class="mt-6 text-base sm:text-lg lg:text-xl text-slate-400 leading-relaxed">
Use Vaultic for free. Upgrade to connect a custom domain, unlock advanced features, and raise your limits.
</p>
<!-- Segment control -->
<div class="mt-8 inline-flex items-center rounded-full border border-white/15 bg-white/5 p-1 backdrop-blur-sm">
<button id="seg-personal" class="px-5 py-2 text-sm font-medium rounded-full text-white bg-white/10 border border-white/10 transition-all duration-200">
Personal
</button>
<button id="seg-business" class="px-5 py-2 text-sm font-medium rounded-full text-slate-300 hover:text-white transition-all duration-200">
Business
</button>
</div>
<!-- Billing toggle -->
<div class="mt-6 flex items-center justify-center gap-3 text-sm">
<span class="text-slate-400">Monthly</span>
<button id="billingToggle" class="relative inline-flex h-6 w-11 items-center rounded-full border border-white/15 bg-white/10 backdrop-blur-sm transition-colors cursor-pointer" aria-pressed="false">
<span class="absolute inset-0 rounded-full" style="background: linear-gradient(90deg, rgba(16,185,129,0.25), rgba(110,231,183,0.25));"></span>
<span class="z-10 inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-300" style="transform: translateX(4px);"></span>
</button>
<div class="inline-flex items-center gap-2">
<span class="text-white">Yearly</span>
<span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium text-emerald-300 border border-emerald-400/30 bg-emerald-400/10">Save 20%</span>
</div>
</div>
</div>
<!-- Cards -->
<div class="relative grid grid-cols-1 lg:grid-cols-3 gap-8 mt-12">
<!-- Mini -->
<div
class="relative rounded-3xl border border-white/15 bg-black/40 backdrop-blur-xl overflow-hidden transition-all duration-300 hover:border-emerald-400/30 hover:bg-black/50 group cursor-pointer">
<div class="pointer-events-none absolute inset-0 transition-all duration-300 group-hover:opacity-100 opacity-75"
style="background: radial-gradient(120% 100% at 0% 0%, rgba(16,185,129,0.18), rgba(16,185,129,0.06) 40%, transparent 60%);">
</div>
<div
class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-400/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
</div>
<div class="p-6 sm:p-8">
<div class="flex items-center justify-between">
<h3
class="text-xl sm:text-2xl font-semibold tracking-tight text-white group-hover:text-emerald-50 transition-colors duration-300">
Mini</h3>
<div class="flex items-center gap-2 text-xs text-slate-400">
<span class="uppercase billing-label">Monthly</span>
<button data-card-toggle="" class="relative inline-flex h-5 w-9 items-center rounded-full border border-white/15 bg-white/10 cursor-pointer transition-colors duration-200 hover:bg-white/15">
<span class="absolute inset-0 rounded-full" style="background: linear-gradient(90deg, rgba(16,185,129,0.25), rgba(110,231,183,0.2));"></span>
<span class="z-10 inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform duration-300" style="transform: translateX(4px);"></span>
</button>
</div>
</div>
<p class="mt-5 text-slate-400 group-hover:text-slate-300 transition-colors duration-300">Landing pages are</p>
<div class="mt-1 flex items-baseline gap-2">
<span class="text-white text-3xl sm:text-4xl font-semibold tracking-tight group-hover:text-emerald-50 transition-colors duration-300">
<span class="price" data-monthly="US$9" data-yearly="US$7">US$9</span>
</span>
<span class="text-slate-400 group-hover:text-slate-300 transition-colors duration-300">/month, per site</span>
</div>
<ul class="mt-6 space-y-3">
<li class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/25 group-hover:ring-emerald-400/40 transition-all duration-300">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">2 pages</span>
</li>
<li class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/25 group-hover:ring-emerald-400/40 transition-all duration-300">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">10 GB bandwidth</span>
</li>
<li class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/25 group-hover:ring-emerald-400/40 transition-all duration-300">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">Custom domain</span>
</li>
</ul>
<button class="mt-8 w-full inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-medium text-white bg-white/10 hover:bg-white/15 border border-white/15 transition-all duration-200 group-hover:border-emerald-400/30 group-hover:bg-emerald-400/10">
Get started
</button>
</div>
</div>
<!-- Basic -->
<div
class="relative rounded-3xl border border-white/15 bg-black/40 backdrop-blur-xl overflow-hidden transition-all duration-300 hover:border-emerald-400/30 hover:bg-black/50 group cursor-pointer">
<div class="pointer-events-none absolute inset-0 transition-all duration-300 group-hover:opacity-100 opacity-75"
style="background: radial-gradient(120% 100% at 0% 0%, rgba(16,185,129,0.18), rgba(16,185,129,0.06) 40%, transparent 60%);">
</div>
<div
class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-400/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
</div>
<div class="p-6 sm:p-8">
<div class="flex items-center justify-between">
<h3
class="text-xl sm:text-2xl font-semibold tracking-tight text-white group-hover:text-emerald-50 transition-colors duration-300">
Basic</h3>
<div class="flex items-center gap-2 text-xs text-slate-400">
<span class="uppercase billing-label">Monthly</span>
<button data-card-toggle="" class="relative inline-flex h-5 w-9 items-center rounded-full border border-white/15 bg-white/10 cursor-pointer transition-colors duration-200 hover:bg-white/15">
<span class="absolute inset-0 rounded-full" style="background: linear-gradient(90deg, rgba(16,185,129,0.25), rgba(110,231,183,0.2));"></span>
<span class="z-10 inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform duration-300" style="transform: translateX(4px);"></span>
</button>
</div>
</div>
<p class="mt-5 text-slate-400 group-hover:text-slate-300 transition-colors duration-300">Basic sites are</p>
<div class="mt-1 flex items-baseline gap-2">
<span class="text-white text-3xl sm:text-4xl font-semibold tracking-tight group-hover:text-emerald-50 transition-colors duration-300">
<span class="price" data-monthly="US$20" data-yearly="US$16">US$20</span>
</span>
<span class="text-slate-400 group-hover:text-slate-300 transition-colors duration-300">/month, per site</span>
</div>
<ul class="mt-6 space-y-3">
<li class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/25 group-hover:ring-emerald-400/40 transition-all duration-300">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">1,000 pages</span>
</li>
<li class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/25 group-hover:ring-emerald-400/40 transition-all duration-300">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">50 GB bandwidth</span>
</li>
<li class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/25 group-hover:ring-emerald-400/40 transition-all duration-300">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">Password protect</span>
</li>
</ul>
<button class="mt-8 w-full inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-medium text-white bg-white/10 hover:bg-white/15 border border-white/15 transition-all duration-200 group-hover:border-emerald-400/30 group-hover:bg-emerald-400/10">
Get started
</button>
</div>
</div>
<!-- Pro -->
<div
class="relative rounded-3xl border border-emerald-400/30 bg-black/40 backdrop-blur-xl overflow-hidden transition-all duration-300 hover:border-emerald-400/50 hover:shadow-[0_0_30px_rgba(16,185,129,0.2)] group cursor-pointer">
<div class="pointer-events-none absolute inset-0 transition-all duration-300 group-hover:opacity-100"
style="background: radial-gradient(120% 120% at 90% 10%, rgba(16,185,129,0.35), rgba(16,185,129,0.15) 40%, rgba(16,185,129,0.06) 60%, transparent 75%);">
</div>
<div
class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-400/40 to-transparent opacity-75 group-hover:opacity-100 transition-opacity duration-300">
</div>
<div class="p-6 sm:p-8">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<h3
class="text-xl sm:text-2xl font-semibold tracking-tight text-white group-hover:text-emerald-50 transition-colors duration-300">
Pro</h3>
<span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium text-emerald-900 bg-emerald-300/95 shadow-[0_0_20px_rgba(16,185,129,0.35)] group-hover:shadow-[0_0_25px_rgba(16,185,129,0.5)] transition-all duration-300">Popular</span>
</div>
<div class="flex items-center gap-2 text-xs text-slate-400">
<span class="uppercase billing-label">Monthly</span>
<button data-card-toggle="" class="relative inline-flex h-5 w-9 items-center rounded-full border border-emerald-400/40 bg-emerald-400/20 cursor-pointer transition-colors duration-200 hover:bg-emerald-400/25">
<span class="absolute inset-0 rounded-full" style="background: linear-gradient(90deg, rgba(16,185,129,0.45), rgba(110,231,183,0.35));"></span>
<span class="z-10 inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform duration-300" style="transform: translateX(4px);"></span>
</button>
</div>
</div>
<p class="mt-5 text-slate-300 group-hover:text-slate-200 transition-colors duration-300">Growing sites are</p>
<div class="mt-1 flex items-baseline gap-2">
<span class="text-white text-3xl sm:text-4xl font-semibold tracking-tight group-hover:text-emerald-50 transition-colors duration-300">
<span class="price" data-monthly="US$41" data-yearly="US$33">US$41</span>
</span>
<span class="text-slate-400 group-hover:text-slate-300 transition-colors duration-300">/month, per site</span>
</div>
<ul class="mt-6 space-y-3">
<li class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/30 group-hover:ring-emerald-400/50 transition-all duration-300">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">10,000 pages</span>
</li>
<li class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/30 group-hover:ring-emerald-400/50 transition-all duration-300">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">100 GB bandwidth</span>
</li>
<li class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/30 group-hover:ring-emerald-400/50 transition-all duration-300">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">10 CMS collections</span>
</li>
</ul>
<button class="mt-8 w-full inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-medium text-black bg-emerald-400/95 hover:bg-emerald-400 transition-colors shadow-[0_0_20px_rgba(16,185,129,0.3)] group-hover:shadow-[0_0_25px_rgba(16,185,129,0.4)]">
Get started
</button>
</div>
</div>
</div>
<!-- Enhanced JavaScript for functionality -->
<script>
(function() {
const section = document.getElementById('aura-emfms84tu');
// Elements
const billingToggle = section.querySelector('#billingToggle');
const cardToggles = section.querySelectorAll('[data-card-toggle]');
const prices = section.querySelectorAll('.price');
const billingLabels = section.querySelectorAll('.billing-label');
const segPersonal = section.querySelector('#seg-personal');
const segBusiness = section.querySelector('#seg-business');
// State
let isYearly = false;
let currentSegment = 'personal';
// Pricing data
const pricingData = {
personal: {
mini: { monthly: 'US$9', yearly: 'US$7' },
basic: { monthly: 'US$20', yearly: 'US$16' },
pro: { monthly: 'US$41', yearly: 'US$33' }
},
business: {
mini: { monthly: 'US$19', yearly: 'US$15' },
basic: { monthly: 'US$49', yearly: 'US$39' },
pro: { monthly: 'US$99', yearly: 'US$79' }
}
};
function updatePricing() {
const data = pricingData[currentSegment];
const period = isYearly ? 'yearly' : 'monthly';
prices.forEach((el, index) => {
const planNames = ['mini', 'basic', 'pro'];
const planName = planNames[index];
if (data[planName]) {
el.textContent = data[planName][period];
el.setAttribute(`data-${period}`, data[planName][period]);
}
});
}
function updateBillingLabels() {
const label = isYearly ? 'Yearly' : 'Monthly';
billingLabels.forEach(el => {
el.textContent = label;
});
}
function setBilling(yearly) {
isYearly = yearly;
// Update knob positions
const knobPos = yearly ? 'translateX(26px)' : 'translateX(4px)';
const cardKnobPos = yearly ? 'translateX(22px)' : 'translateX(4px)';
// Header toggle
const headerKnob = billingToggle.querySelector('span.z-10');
if (headerKnob) {
headerKnob.style.transform = yearly ? 'translateX(26px)' : 'translateX(4px)';
}
// Card toggles
cardToggles.forEach(btn => {
const knob = btn.querySelector('span.z-10');
if (knob) {
knob.style.transform = yearly ? 'translateX(22px)' : 'translateX(4px)';
}
});
billingToggle.setAttribute('aria-pressed', yearly ? 'true' : 'false');
updatePricing();
updateBillingLabels();
}
function setSegment(segment) {
currentSegment = segment;
// Update button styles
if (segment === 'personal') {
segPersonal.className = 'px-5 py-2 text-sm font-medium rounded-full text-white bg-white/10 border border-white/10 transition-all duration-200';
segBusiness.className = 'px-5 py-2 text-sm font-medium rounded-full text-slate-300 hover:text-white transition-all duration-200';
} else {
segBusiness.className = 'px-5 py-2 text-sm font-medium rounded-full text-white bg-white/10 border border-white/10 transition-all duration-200';
segPersonal.className = 'px-5 py-2 text-sm font-medium rounded-full text-slate-300 hover:text-white transition-all duration-200';
}
updatePricing();
}
// Event listeners
billingToggle.addEventListener('click', () => {
setBilling(!isYearly);
});
cardToggles.forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
setBilling(!isYearly);
});
});
segPersonal.addEventListener('click', () => {
setSegment('personal');
});
segBusiness.addEventListener('click', () => {
setSegment('business');
});
// Initialize
setBilling(false);
setSegment('personal');
})();
</script>
</div>