All Prompts
All Prompts
pricingtailwindresponsiveinteractivecardslanding-pagesaas
Tailwind Responsive Pricing Section with Billing Toggle
Адаптивная секция цен Tailwind с переключением тарифов (месяц/год), списком фич и кнопками CTA. Идеально для лендингов SaaS.
Prompt
<section class="sm:px-8 sm:mt-32 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll animate max-w-7xl mt-32 mr-auto ml-auto pr-6 pl-6">
<div class="sm:pt-8 sm:pl-8 sm:pr-8 sm:pb-8 bg-gradient-to-br from-gray-500/10 via-gray-500/0 to-gray-500/10 rounded-3xl ring-0 pt-6 pr-8 pb-6 pl-8" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="grid grid-cols-1 lg:grid-cols-12 lg:gap-10 gap-8">
<!-- Left: Feature bullets -->
<div class="lg:col-span-5">
<div class="space-y-8">
<div class="">
<span class="inline-flex items-center gap-2 text-xs font-medium text-emerald-300 tracking-tight font-geist bg-emerald-600/10 ring-emerald-500/30 ring-1 rounded-full pt-1.5 pr-4 pb-1.5 pl-4">PRICING</span>
<h2 class="sm:text-5xl lg:text-6xl text-4xl font-light text-white tracking-tight font-geist mt-6">
Simple, smart, transparent pricing
</h2>
<p class="mt-6 text-base sm:text-lg dark:text-neutral-400 text-neutral-600">
See how Moneo helps individuals and small businesses take control of their budgets, save smarter, and plan
ahead with AI-driven insights.
</p>
</div>
<div class="flex items-start gap-4">
<span class="shrink-0 inline-flex h-10 w-10 items-center justify-center rounded-full ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M3 3v18h18" class=""></path><path d="M7 13l3 3 7-7" class=""></path></svg>
</span>
<div class="">
<h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Auto-categorization powered by AI</h3>
<p class="mt-1 text-sm text-neutral-400">Moneo learns your habits and classifies transactions with high accuracy — no more manual cleanup.</p>
</div>
</div>
<div class="flex items-start gap-4">
<span class="shrink-0 inline-flex h-10 w-10 items-center justify-center rounded-full ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M12 3v18" class=""></path><path d="M3 12h18" class=""></path></svg>
</span>
<div class="">
<h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Smart budgets & envelopes</h3>
<p class="mt-1 text-sm text-neutral-400">Create monthly or rolling budgets with drift protection, alerts, and envelope-style rules.</p>
</div>
</div>
<div class="flex items-start gap-4">
<span class="shrink-0 inline-flex h-10 w-10 items-center justify-center rounded-full ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5-6 5 6" class=""></path></svg>
</span>
<div class="">
<h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Bank sync & anomaly alerts</h3>
<p class="mt-1 text-sm text-neutral-400">Securely connect accounts, get real-time sync, and catch unusual spend before it snowballs.</p>
</div>
</div>
</div>
</div>
<!-- Right: Plans -->
<div class="lg:col-span-7">
<!-- Billing toggle -->
<div class="mb-4 flex items-center justify-center md:justify-end">
<div class="inline-flex rounded-full ring-1 p-1 ring-white/10 bg-white/5">
<button type="button" data-billing="monthly" class="billing-tab px-4 py-1.5 text-sm rounded-full ring-1 text-white/90 bg-white/10 ring-white/15" aria-pressed="true">Monthly</button>
<button type="button" data-billing="annual" class="billing-tab px-4 py-1.5 text-sm rounded-full text-neutral-300 hover:text-white" aria-pressed="false">Annual</button>
</div>
<span class="ml-3 hidden md:inline text-xs bg-emerald-500/10 ring-1 px-2.5 py-1 rounded-full text-emerald-300/80 ring-emerald-400/30">
Save 20% annually
</span>
</div>
<!-- Equal height cards (centered horizontally) -->
<div class="grid grid-cols-1 md:grid-cols-2 [grid-auto-rows:1fr] gap-x-6 gap-y-6 items-stretch max-w-3xl mx-auto">
<!-- Starter -->
<div class="flex flex-col sm:p-6 h-full ring-1 rounded-2xl p-5 bg-neutral-900/80 ring-white/10">
<div class="flex items-start justify-between">
<p class="text-sm font-medium tracking-tight text-white">Starter</p>
</div>
<div class="mt-3">
<div class="flex gap-2 items-baseline">
<span class="price text-5xl font-light tracking-tight text-white" data-monthly="$9" data-annual="$86">$9</span>
<span class="price-unit text-sm text-neutral-400" data-monthly="/ month" data-annual="/ year">/ month</span>
</div>
<p class="mt-2 text-sm text-neutral-400">Perfect for individuals getting control of monthly spending.</p>
<p class="billing-note mt-1 text-xs text-neutral-500 hidden">Billed yearly</p>
</div>
<div class="mt-5 space-y-3">
<a href="#" class="w-full inline-flex items-center justify-center text-base font-medium tracking-tight rounded-full ring-1 py-3.5 px-6 transition-all duration-300 hover:brightness-110 text-white ring-emerald-400/30" style="background: linear-gradient(135deg, rgb(16,185,129) 0%, rgb(5,150,105) 100%);">Start free trial</a>
<button class="w-full inline-flex items-center justify-center text-base font-medium tracking-tight rounded-full ring-1 py-3.5 px-6 transition-all duration-300 text-neutral-200 ring-white/10 hover:bg-white/5">Compare features</button>
</div>
<div class="mt-6 pt-6 border-t border-white/10">
<p class="text-xs font-semibold tracking-tight text-neutral-300">INCLUDES</p>
<p class="mt-1 text-xs text-neutral-500">Everything you need to start</p>
<ul class="mt-4 space-y-3">
<li class="flex items-start gap-3 text-sm text-neutral-300">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-full ring-1 shrink-0 bg-white/5 text-neutral-200 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
AI auto-categorization (single profile)
</li>
<li class="flex items-start gap-3 text-sm text-neutral-300">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-full ring-1 shrink-0 bg-white/5 text-neutral-200 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
2 bank connections, daily sync
</li>
</ul>
</div>
</div>
<!-- Pro -->
<div class="flex flex-col h-full rounded-2xl ring-1 p-5 sm:p-6 ring-white/10 bg-neutral-900/80">
<div class="flex items-start justify-between">
<p class="text-sm font-medium tracking-tight text-white">Pro</p>
</div>
<div class="mt-3">
<div class="flex gap-2 items-baseline">
<span class="price text-5xl font-light tracking-tight text-white" data-monthly="$29" data-annual="$278">$29</span>
<span class="price-unit text-sm text-neutral-400" data-monthly="/ month" data-annual="/ year">/ month</span>
</div>
<p class="mt-2 text-sm text-neutral-400">For power users, couples, and small teams managing shared budgets.</p>
<p class="billing-note mt-1 text-xs text-neutral-500 hidden">Billed yearly</p>
</div>
<div class="mt-5 space-y-3">
<a href="#" class="w-full inline-flex items-center justify-center text-base font-medium tracking-tight rounded-full ring-1 py-3.5 px-6 transition-all duration-300 hover:brightness-110 text-white ring-emerald-400/30" style="background: linear-gradient(135deg, rgb(16,185,129) 0%, rgb(5,150,105) 100%);">Start free trial</a>
<button class="w-full inline-flex items-center justify-center text-base font-medium tracking-tight rounded-full ring-1 py-3.5 px-6 transition-all duration-300 text-neutral-200 ring-white/10 hover:bg-white/5">Compare features</button>
</div>
<div class="mt-6 pt-6 border-t border-white/10">
<p class="text-xs font-semibold tracking-tight text-neutral-300">EVERYTHING IN STARTER, PLUS</p>
<p class="mt-1 text-xs text-neutral-500">Advanced controls & collaboration</p>
<ul class="mt-4 space-y-3">
<li class="flex items-start gap-3 text-sm text-neutral-300">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-full ring-1 shrink-0 bg-white/5 text-neutral-200 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
Unlimited bank connections, hourly sync
</li>
<li class="flex items-start gap-3 text-sm text-neutral-300">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-full ring-1 shrink-0 bg-white/5 text-neutral-200 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
Shared budgets & roles (Viewer/Editor)
</li>
</ul>
</div>
</div>
</div>
</div> <!-- /Right -->
</div>
</div>
<!-- Billing toggle script -->
<script class="">
(function () {
const tabs = document.querySelectorAll('.billing-tab');
const prices = document.querySelectorAll('.price');
const units = document.querySelectorAll('.price-unit');
const notes = document.querySelectorAll('.billing-note');
function setBilling(mode) {
tabs.forEach(btn => {
const active = btn.dataset.billing === mode;
btn.setAttribute('aria-pressed', active ? 'true' : 'false');
btn.classList.toggle('bg-white/10', active);
btn.classList.toggle('ring-1', active);
btn.classList.toggle('ring-white/15', active);
btn.classList.toggle('text-white/90', active);
btn.classList.toggle('text-neutral-300', !active);
});
prices.forEach(el => el.textContent = el.dataset[mode]);
units.forEach(el => el.textContent = el.dataset[mode]);
notes.forEach(el => el.classList.toggle('hidden', mode !== 'annual'));
}
tabs.forEach(btn => btn.addEventListener('click', () => setBilling(btn.dataset.billing)));
setBilling('monthly'); // default
})();
</script>
</section>