Pricing cards with dotted grids
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 - Zova</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=Manrope:wght@600&family=Geist:wght@400;500;600&display=swap" rel="stylesheet">
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.pricing-card-gradient {
background: linear-gradient(0deg, rgb(250, 250, 250) 0%, rgb(244, 244, 244) 100%);
}
.highlight-card-gradient {
background: linear-gradient(0deg, rgb(232, 241, 252) 0%, rgb(232, 241, 252) 100%);
}
.btn-filled {
background: linear-gradient(131deg, rgb(96, 95, 95) 0%, rgb(0, 0, 0) 59%);
}
.bg-pattern {
background-image: url("https://framerusercontent.com/images/wGAHOWhVswEtWkOKTJN6s2CW0.svg");
background-size: 17px;
background-repeat: repeat;
}
.highlight-sketch {
position: relative;
z-index: 1;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='30'><path d='M3 22 Q80 13 170 18 T340 27' fill='none' stroke='rgb(207, 226, 252)' stroke-width='9' stroke-linecap='round' stroke-opacity='0.65'/></svg>") 0px 85% / 100% 70% no-repeat;
padding: 2px 2px 8px;
}
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(207, 226, 252)',
'neutral-background': 'rgb(255, 255, 255)',
'text-primary': 'rgb(0, 0, 0)',
'text-secondary': 'rgb(96, 95, 95)',
'blue-accent': 'rgb(232, 241, 252)',
},
fontFamily: {
'primary': ['Manrope', 'sans-serif'],
'secondary': ['Geist', 'sans-serif'],
},
borderRadius: {
'pricing': '20px',
'card': '12px',
},
}
}
}</script></head>
<body id="app-root" class="bg-white overflow-x-hidden">
<main><section class="max-w-[1300px] mx-auto px-10 md:px-20 py-16 flex flex-col gap-16">
<!-- Header Section -->
<div class="flex flex-col md:flex-row justify-between items-center w-full gap-8">
<div class="max-w-[550px]">
<h2 class="font-primary text-[44px] font-semibold leading-[52.8px] tracking-[-2.2px] text-text-primary">
Simple <span class="highlight-sketch">pricing</span> for every team
</h2>
</div>
<div class="max-w-[376px]">
<p class="font-secondary text-lg font-medium leading-[21.6px] tracking-[-0.9px] text-text-secondary">
Choose a plan that supports your workflow and scales as you grow.
</p>
</div>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 w-full">
<!-- Starter Plan -->
<div class="pricing-card-gradient relative flex flex-col gap-6 p-4 rounded-pricing overflow-hidden border border-transparent">
<div class="bg-white rounded-card p-4 flex flex-col justify-center items-start gap-6 z-10">
<div class="flex flex-col gap-4">
<h5 class="font-primary text-[22px] font-semibold leading-[28.6px] tracking-[-0.88px] text-text-primary">Starter</h5>
<p class="font-secondary text-base font-normal leading-[19.2px] tracking-[-0.64px] text-text-secondary">For individuals and early teams getting started with financial clarity.</p>
</div>
<div class="font-secondary text-[36px] font-semibold leading-[43.2px] tracking-[-1.44px] text-text-primary">
Free
</div>
</div>
<div class="flex flex-col gap-3 z-10 w-full">
<a href="#contact" class="flex justify-center items-center h-[43.2px] w-full bg-white border border-[#E6E6E6] rounded-card shadow-[0_6px_10px_rgba(0,0,0,0.05)] text-black font-secondary text-base font-medium tracking-[-0.64px] hover:opacity-80 transition-opacity">
Get started
</a>
<div class="flex flex-col gap-2 p-2">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Connect up to three data sources</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Basic dashboard views</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Standard forecasting</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Automated weekly reports</span>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-[270px] bg-pattern opacity-40 pointer-events-none" style="mask-image: linear-gradient(to top, black, transparent);"></div>
</div>
<!-- Growth Plan (Highlighted) -->
<div class="highlight-card-gradient relative flex flex-col gap-6 p-4 rounded-pricing overflow-hidden border-2 border-brand-primary shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
<div class="bg-white rounded-card p-4 flex flex-col justify-center items-start gap-6 z-10">
<div class="flex flex-col gap-4">
<h5 class="font-primary text-[22px] font-semibold leading-[28.6px] tracking-[-0.88px] text-text-primary">Growth</h5>
<p class="font-secondary text-base font-normal leading-[19.2px] tracking-[-0.64px] text-text-secondary">For growing teams that need deeper insights and more automation.</p>
</div>
<div class="flex items-baseline gap-1">
<span class="font-secondary text-[36px] font-semibold leading-[43.2px] tracking-[-1.44px] text-text-primary">$49</span>
<span class="font-secondary text-sm font-normal text-text-secondary tracking-[-0.56px]">/mo</span>
</div>
</div>
<div class="flex flex-col gap-3 z-10 w-full">
<a href="#contact" class="flex justify-center items-center h-[43.2px] w-full btn-filled rounded-card shadow-[0_2px_8px_rgba(0,0,0,0.25)] text-white font-secondary text-base font-medium tracking-[-0.64px] hover:opacity-90 transition-opacity">
Get started
</a>
<div class="flex flex-col gap-2 p-2">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Unlimited data sources</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Advanced customization</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Real time forecasting</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Automated daily reports</span>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-[270px] bg-pattern opacity-60 pointer-events-none" style="mask-image: linear-gradient(to top, black, transparent);"></div>
</div>
<!-- Pro Plan -->
<div class="pricing-card-gradient relative flex flex-col gap-6 p-4 rounded-pricing overflow-hidden border border-transparent">
<div class="bg-white rounded-card p-4 flex flex-col justify-center items-start gap-6 z-10">
<div class="flex flex-col gap-4">
<h5 class="font-primary text-[22px] font-semibold leading-[28.6px] tracking-[-0.88px] text-text-primary">Pro</h5>
<p class="font-secondary text-base font-normal leading-[19.2px] tracking-[-0.64px] text-text-secondary">For established teams looking for full visibility and powerful analysis.</p>
</div>
<div class="flex items-baseline gap-1">
<span class="font-secondary text-[36px] font-semibold leading-[43.2px] tracking-[-1.44px] text-text-primary">$99</span>
<span class="font-secondary text-sm font-normal text-text-secondary tracking-[-0.56px]">/mo</span>
</div>
</div>
<div class="flex flex-col gap-3 z-10 w-full">
<a href="#contact" class="flex justify-center items-center h-[43.2px] w-full bg-white border border-[#E6E6E6] rounded-card shadow-[0_6px_10px_rgba(0,0,0,0.05)] text-black font-secondary text-base font-medium tracking-[-0.64px] hover:opacity-80 transition-opacity">
Get started
</a>
<div class="flex flex-col gap-2 p-2">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Full integrations</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Custom reporting & exports</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Team collaboration</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-[#AEAEAE]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span class="font-secondary text-base text-text-secondary tracking-[-0.64px]">Dedicated account support</span>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-[270px] bg-pattern opacity-40 pointer-events-none" style="mask-image: linear-gradient(to top, black, transparent);"></div>
</div>
</div>
</section></main>
</body></html>
change the content
Created by: LandingHero
