3 set pricing cards with subtle gradient
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>Fluence AI Pricing</title>
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap" rel="stylesheet">
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'General Sans';
src: url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');
}
.popular-blob {
filter: blur(35px);
z-index: 0;
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(213, 136, 251)', // Lavender border color
'text-primary': 'rgb(27, 12, 37)',
'text-secondary': 'rgba(28, 12, 38, 0.6)',
'neutral-background': 'rgb(255, 255, 255)',
'neutral-surface': 'rgb(247, 246, 247)',
'accent-dark': 'rgb(27, 12, 38)',
},
fontFamily: {
'primary': ['General Sans', 'sans-serif'],
'secondary': ['General Sans', 'sans-serif'],
},
borderRadius: {
'pricing': '16px',
},
boxShadow: {
'pricing-card': '0 1px 2px rgba(0, 0, 0, 0.06)',
'toggle': '0 1px 2px rgba(0, 0, 0, 0.06)',
'badge': '0 2px 5px rgba(0, 0, 0, 0.07), 0 8px 8px rgba(0, 0, 0, 0.06)',
}
}
},
plugins: [],
}</script></head>
<body id="app-root" class="bg-white font-secondary text-text-primary antialiased">
<main><div id="pricing-page" class="py-[100px] px-4 flex flex-col items-center">
<!-- Header Section -->
<div class="max-w-[800px] w-full flex flex-col items-center gap-10 mb-16 text-center">
<div class="flex flex-col items-center gap-6">
<div class="inline-flex items-center justify-center px-3.5 py-1.5 bg-white border border-brand-primary rounded-full shadow-badge uppercase text-[14px] font-medium tracking-tight">
Pricing
</div>
<h2 class="text-[60px] leading-[60px] font-medium text-text-primary tracking-tight">
Simple, Flexible Pricing
</h2>
<p class="text-[18px] leading-[28px] text-text-primary opacity-80">
Pricing plans for businesses at every stage of growth.
</p>
</div>
<!-- Toggle Selector -->
<div class="bg-[#edecee] p-1 rounded-lg inline-flex items-center gap-2">
<button class="px-5 py-1.5 bg-white rounded shadow-toggle text-[16px] font-medium text-text-primary">
Monthly
</button>
<button class="px-5 py-1.5 rounded text-[16px] font-medium text-text-secondary">
Yearly
</button>
</div>
</div>
<!-- Pricing Cards Grid -->
<div class="max-w-[1240px] w-full grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Starter Plan -->
<div class="bg-white rounded-pricing p-6 shadow-pricing-card border border-transparent hover:border-text-primary/10 transition-colors flex flex-col gap-8 h-full min-h-[500px]">
<div class="flex flex-col gap-10">
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3">
<svg class="w-[22px] h-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
<h4 class="text-[24px] font-medium text-text-primary">Starter</h4>
</div>
<p class="text-[16px] text-text-primary">Get started with Fluence AI at no cost</p>
</div>
<div class="flex flex-col gap-6">
<h3 class="text-[44px] leading-none font-medium text-text-primary">Free</h3>
<a href="/contact" class="flex items-center justify-center h-[50px] w-full bg-white border border-[#edecee] rounded-lg shadow-pricing-card text-[16px] font-medium text-text-primary hover:bg-neutral-surface transition-colors">
Get Started
</a>
</div>
</div>
<div class="flex flex-col gap-4">
<p class="text-[16px] font-medium text-text-primary/70">What's Included</p>
<ul class="space-y-4">
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">400 AI credits at signup</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">20,000 AI token inputs</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">Calendar integration & syncing</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">Guest sharing and links</span>
</li>
</ul>
</div>
</div>
<!-- Plus Plan (Popular) -->
<div class="relative bg-white rounded-pricing p-2 shadow-pricing-card flex flex-col min-h-[503px] overflow-hidden">
<!-- Gradient Blob Decoration -->
<div class="absolute -top-[30px] -right-[60px] w-[181px] h-[181px] popular-blob bg-brand-primary opacity-30 rounded-full"></div>
<div class="bg-neutral-surface rounded-lg p-4 flex flex-col gap-2 z-10 shadow-sm mb-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<h4 class="text-[24px] font-medium text-text-primary">Plus</h4>
<svg class="w-[22px] h-[22px] text-text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 8v8M8 12h8"></path></svg>
<span class="bg-accent-dark text-white text-[14px] font-medium px-2 py-0.5 rounded-full capitalize">popular</span>
</div>
</div>
<p class="text-[16px] text-text-primary">Unlock more powerful features</p>
</div>
<div class="px-4 py-2 flex flex-col gap-8 z-10 flex-grow">
<div class="flex flex-col gap-6">
<div class="flex items-end gap-1">
<h3 class="text-[44px] leading-none font-medium text-text-primary">$22</h3>
<span class="text-[14px] text-text-primary opacity-70 pb-1">/month, per user</span>
</div>
<a href="/contact" class="flex items-center justify-center h-[50px] w-full bg-accent-dark rounded-lg shadow-badge text-[16px] font-medium text-white hover:opacity-90 transition-opacity backdrop-blur-[6px]">
Get Started
</a>
</div>
<div class="flex flex-col gap-4">
<p class="text-[16px] font-medium text-text-primary/70">What's Included</p>
<ul class="space-y-4">
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">Unlimited AI credits</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">50,000 AI token inputs</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">Calendar integration & syncing</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">Guest sharing and links</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Pro Plan -->
<div class="bg-white rounded-pricing p-6 shadow-pricing-card border border-transparent hover:border-text-primary/10 transition-colors flex flex-col gap-8 h-full min-h-[500px]">
<div class="flex flex-col gap-10">
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3">
<h4 class="text-[24px] font-medium text-text-primary">Pro</h4>
<svg class="w-[22px] h-[22px] text-text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"></path></svg>
</div>
<p class="text-[16px] text-text-primary">Take your business to the next level</p>
</div>
<div class="flex flex-col gap-6">
<div class="flex items-end gap-1">
<h3 class="text-[44px] leading-none font-medium text-text-primary">$69</h3>
<span class="text-[14px] text-text-primary opacity-70 pb-1">/month, per user</span>
</div>
<a href="/contact" class="flex items-center justify-center h-[50px] w-full bg-white border border-[#edecee] rounded-lg shadow-pricing-card text-[16px] font-medium text-text-primary hover:bg-neutral-surface transition-colors">
Get Started
</a>
</div>
</div>
<div class="flex flex-col gap-4">
<p class="text-[16px] font-medium text-text-primary/70">What's Included</p>
<ul class="space-y-4">
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">Unlimited AI creation</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">100,000 AI token inputs</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">Calendar integration & syncing</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-[16px] text-text-primary">Guest sharing and links</span>
</li>
</ul>
</div>
</div>
</div>
</div></main>
</body></html>
make only the oricing section, change the textual content
Created by: LandingHero
