Pricing cards with toggle feature
Category: Pricing
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Pricing Component</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Inter+Tight:wght@400;500;600&display=swap" rel="stylesheet">
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'Inter Display';
src: url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
}
}
.pricing-card-highlight {
background: linear-gradient(208deg, #4686fe 0%, #659bff 35%);
}
.btn-black-gradient {
background: linear-gradient(135deg, #000000 0%, #6d6d6d 100%);
}
.btn-primary-gradient {
background: linear-gradient(135deg, #659bff 0%, #4686fe 100%);
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': '#659bff',
'brand-secondary': '#4686fe',
'neutral-background': '#ffffff',
'neutral-surface': '#f4f4f4',
'text-primary': '#3d3d3d',
'text-secondary': '#6d6d6d',
},
fontFamily: {
'primary': ['Inter Display', 'Inter', 'sans-serif'],
'secondary': ['Inter Tight', 'Inter', 'sans-serif'],
},
borderRadius: {
'xl': '24px',
'2xl': '40px',
},
boxShadow: {
'plan': '0 8px 30px rgba(0, 0, 0, 0.08)',
'tag': '0 4px 12px rgba(0, 0, 0, 0.1)',
'btn': '0 4px 8px rgba(0, 0, 0, 0.15)',
}
}
},
plugins: [],
}</script></head>
<body id="app-root" class="font-secondary bg-white text-text-primary antialiased">
<main><section class="flex flex-col items-center justify-center py-16 px-4 md:px-20 overflow-hidden min-h-screen">
<!-- Header -->
<div class="flex flex-col items-center gap-4 mb-10 text-center max-w-[550px]" data-animation-on-scroll="">
<div class="flex items-center justify-center px-3 py-1.5 bg-white border border-[#e6e6e6] rounded-full shadow-tag">
<span class="font-primary text-sm text-text-secondary tracking-tight">Pricing</span>
</div>
<h2 class="font-primary text-4xl md:text-[48px] font-medium leading-[1.2] tracking-[-1.44px] text-text-primary">
Flexible Plans for Every Stage
</h2>
</div>
<!-- Cards Container -->
<div class="flex flex-col lg:flex-row items-end justify-center gap-6 w-full max-w-[1140px]">
<!-- Starter Plan -->
<div class="bg-white rounded-xl shadow-plan w-full max-w-[364px] flex-1 overflow-hidden" data-animation-on-scroll="">
<div class="p-8 flex flex-col gap-6">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-neutral-surface rounded-full flex items-center justify-center p-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 fill-current">
<path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,120,47.65,76,128,32l80.35,44Zm8,99.64V133.83l80-43.78v85.76Z"></path>
</svg>
</div>
<h4 class="font-primary text-[26px] font-medium tracking-tight text-text-primary">Starter</h4>
</div>
<div class="flex items-baseline gap-2">
<h2 class="font-primary text-5xl font-medium tracking-tighter text-text-primary">$0</h2>
<span class="font-primary text-lg font-medium text-text-secondary">/ mo</span>
</div>
<p class="font-primary text-base text-text-secondary leading-relaxed tracking-tight">
Perfect for solo founders and early-stage projects.
</p>
<a href="#" class="btn-black-gradient text-white text-center py-2.5 rounded-full font-medium shadow-btn hover:opacity-90 transition-opacity">
Get Started
</a>
<div class="h-px bg-[#eee] w-full"></div>
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">1 connected account</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Real-time dashboard access</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Basic reporting</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Email support</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Up to 2 team members</span>
</li>
</ul>
</div>
</div>
<!-- Growth Plan (Highlighted) -->
<div class="pricing-card-highlight rounded-xl shadow-plan w-full max-w-[364px] flex-1 overflow-hidden pt-10" data-animation-on-scroll="">
<div class="relative bg-white rounded-t-xl p-8 flex flex-col gap-6">
<!-- Badge -->
<div class="absolute -top-7 left-1/2 -translate-x-1/2 text-white font-primary text-sm tracking-tight">
Best Deal
</div>
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-[#659bff1a] rounded-full flex items-center justify-center p-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-[#659bff] fill-current">
<path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path>
</svg>
</div>
<h4 class="font-primary text-[26px] font-medium tracking-tight text-text-primary">Growth</h4>
</div>
<div class="flex items-baseline gap-2">
<h2 class="font-primary text-5xl font-medium tracking-tighter text-text-primary">$25</h2>
<span class="font-primary text-lg font-medium text-text-secondary">/ mo</span>
</div>
<p class="font-primary text-base text-text-secondary leading-relaxed tracking-tight">
Ideal for growing teams who need deeper insights.
</p>
<a href="#" class="btn-primary-gradient text-white text-center py-2.5 rounded-full font-medium shadow-btn hover:opacity-90 transition-opacity">
Get Started
</a>
<div class="h-px bg-[#eee] w-full"></div>
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-[#6d6d6d] fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Up to 5 connected accounts</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-[#6d6d6d] fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Advanced analytics</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-[#6d6d6d] fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Automated reports</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-[#6d6d6d] fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Priority email support</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-[#6d6d6d] fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Up to 10 team members</span>
</li>
</ul>
</div>
</div>
<!-- Scale Plan -->
<div class="bg-white rounded-xl shadow-plan w-full max-w-[364px] flex-1 overflow-hidden" data-animation-on-scroll="">
<div class="p-8 flex flex-col gap-6">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-neutral-surface rounded-full flex items-center justify-center p-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 fill-current">
<path d="M213.85,125.46l-112,120a8,8,0,0,1-13.69-7l14.66-73.33L45.19,143.49a8,8,0,0,1-3-13l112-120a8,8,0,0,1,13.69,7L153.18,90.9l57.63,21.61a8,8,0,0,1,3,12.95Z"></path>
</svg>
</div>
<h4 class="font-primary text-[26px] font-medium tracking-tight text-text-primary">Scale</h4>
</div>
<div class="flex items-baseline gap-2">
<h2 class="font-primary text-5xl font-medium tracking-tighter text-text-primary">$75</h2>
<span class="font-primary text-lg font-medium text-text-secondary">/ mo</span>
</div>
<p class="font-primary text-base text-text-secondary leading-relaxed tracking-tight">
For established teams ready to maximize performance.
</p>
<a href="#" class="btn-black-gradient text-white text-center py-2.5 rounded-full font-medium shadow-btn hover:opacity-90 transition-opacity">
Contact Us
</a>
<div class="h-px bg-[#eee] w-full"></div>
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Unlimited connected accounts</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Custom dashboards</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Exportable reports</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Dedicated support</span>
</li>
<li class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 text-text-secondary fill-current"><path d="M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z"></path></svg>
<span class="font-primary text-base text-text-secondary tracking-tight">Unlimited team members</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-on-scroll-visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('[data-animation-on-scroll]').forEach(el => {
el.classList.add('animate-on-scroll-hidden');
observer.observe(el);
});
});
</script></main>
</body></html> change the textual content
Created by: LandingHero
