Component:
Pricing Business Modern
Colors:
Description:
This carefully crafted Pricing component is perfect for Business landing pages, featuring a Modern design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@type: Pricing
@industry: Business
@style: Modern
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-slate-50: #f8fafc;
--color-slate-100: #f1f5f9;
--color-slate-200: #e2e8f0;
--color-slate-500: #64748b;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-900: #0f172a;
--color-indigo-50: #eef2ff;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--spacing-1: 0.25rem;
--spacing-1-5: 0.375rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-sans);
}
/* Base Styles */
.pricing-section {
background-color: var(--color-slate-50);
padding: 4rem 1rem;
}
/* Heading Styles */
.heading-container {
text-align: center;
max-width: 48rem; /* max-w-3xl */
margin-left: auto;
margin-right: auto;
margin-bottom: 2.5rem;
}
.heading-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 1rem;
line-height: 1;
}
.heading-description {
font-size: 1.125rem;
color: var(--color-slate-600);
}
/* Pricing Toggle */
.toggle-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
.toggle-buttons {
background-color: var(--color-slate-100);
padding: 0.375rem;
border-radius: 0.75rem;
display: inline-flex;
align-items: center;
margin-bottom: 0.5rem;
}
.toggle-button {
position: relative;
padding: 0.5rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s;
border: none;
cursor: pointer;
}
.toggle-button.active {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
.toggle-button:not(.active) {
color: var(--color-slate-700);
background-color: transparent;
}
.toggle-hint {
font-size: 0.75rem;
color: var(--color-indigo-600);
font-weight: 500;
}
/* Pricing Cards Grid */
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
/* Pricing Card Base */
.pricing-card {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: 2rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-slate-200);
display: flex;
flex-direction: column;
height: 100%;
transition: all 0.3s;
}
/* Featured Card */
.pricing-card-featured {
border: 2px solid var(--color-indigo-600);
box-shadow: var(--shadow-xl);
position: relative;
}
.featured-badge {
position: absolute;
top: 0;
right: 0;
background-color: var(--color-indigo-600);
color: var(--color-white);
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.75rem;
border-bottom-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
/* Card Header */
.card-header {
margin-bottom: 1.5rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 0.5rem;
}
.card-description {
color: var(--color-slate-600);
}
/* Pricing */
.pricing-container {
margin-bottom: 1.5rem;
}
.price-wrapper {
display: flex;
align-items: baseline;
}
.price {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-slate-900);
}
.price-period {
color: var(--color-slate-600);
margin-left: 0.5rem;
}
.billing-info {
font-size: 0.875rem;
color: var(--color-slate-500);
margin-top: 0.5rem;
}
/* Features List */
.pricing-list {
list-style: none;
margin-bottom: 2rem;
}
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.feature-item:last-child {
margin-bottom: 0;
}
.feature-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-indigo-600);
margin-top: 0.125rem;
flex-shrink: 0;
}
.feature-text {
color: var(--color-slate-600);
margin-left: 0.75rem;
}
/* CTA Button */
.cta-wrapper {
margin-top: auto;
}
.cta-button {
display: block;
width: 100%;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-align: center;
font-weight: 500;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.cta-button-primary {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
.cta-button-primary:hover {
background-color: var(--color-indigo-700);
}
.cta-button-secondary {
background-color: var(--color-white);
color: var(--color-indigo-600);
border: 1px solid var(--color-indigo-600);
}
.cta-button-secondary:hover {
background-color: var(--color-indigo-50);
}
/* Responsive Breakpoints */
@media (min-width: 768px) {
.pricing-section {
padding: 6rem 1.5rem;
}
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.heading-title {
font-size: 2.25rem;
}
}
@media (min-width: 1024px) {
.container {
padding-left: 2rem;
padding-right: 2rem;
}
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="pricing-section">
<div>
<!-- Heading -->
<div class="heading-container">
<h2 class="heading-title">Simple, transparent pricing</h2>
<p class="heading-description">Choose the plan that's right for your business and scale as you grow.</p>
</div>
<!-- Pricing Toggle -->
<div class="toggle-container">
<div class="toggle-buttons">
<button id="monthly-toggle" class="toggle-button active">
<span>Monthly</span>
</button>
<button id="annual-toggle" class="toggle-button">
<span>Annual</span>
</button>
</div>
<p class="toggle-hint">Save 20% with annual billing</p>
</div>
<!-- Pricing Cards -->
<div class="pricing-grid">
<!-- Starter Plan -->
<div class="pricing-card">
<div class="card-header">
<h3 class="card-title">Starter</h3>
<p class="card-description">Perfect for small businesses just getting started.</p>
</div>
<div class="pricing-container">
<div class="price-wrapper">
<span class="price" id="starter-price">$29</span>
<span class="price-period" id="starter-period">/month</span>
</div>
<p class="billing-info" id="starter-billing">Billed monthly or $278 annually</p>
</div>
<ul class="pricing-list">
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Up to 5 team members</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">20GB storage</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Basic analytics</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Email support</span>
</li>
</ul>
<div class="cta-wrapper">
<a href="#" class="cta-button cta-button-secondary" aria-label="Get started with Starter plan">Get started</a>
</div>
</div>
<!-- Professional Plan (Featured) -->
<div class="pricing-card pricing-card-featured">
<div class="featured-badge">MOST POPULAR</div>
<div class="card-header">
<h3 class="card-title">Professional</h3>
<p class="card-description">Ideal for growing businesses with more demands.</p>
</div>
<div class="pricing-container">
<div class="price-wrapper">
<span class="price" id="pro-price">$79</span>
<span class="price-period" id="pro-period">/month</span>
</div>
<p class="billing-info" id="pro-billing">Billed monthly or $758 annually</p>
</div>
<ul class="pricing-list">
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Up to 20 team members</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">100GB storage</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Advanced analytics</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Priority email & chat support</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Custom integrations</span>
</li>
</ul>
<div class="cta-wrapper">
<a href="#" class="cta-button cta-button-primary" aria-label="Get started with Professional plan">Get started</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="pricing-card">
<div class="card-header">
<h3 class="card-title">Enterprise</h3>
<p class="card-description">Advanced features for large organizations.</p>
</div>
<div class="pricing-container">
<div class="price-wrapper">
<span class="price" id="enterprise-price">$199</span>
<span class="price-period" id="enterprise-period">/month</span>
</div>
<p class="billing-info" id="enterprise-billing">Billed monthly or $1,910 annually</p>
</div>
<ul class="pricing-list">
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Unlimited team members</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Unlimited storage</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Enterprise analytics</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">24/7 dedicated support</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Custom development</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">SLA & dedicated account manager</span>
</li>
</ul>
<div class="cta-wrapper">
<a href="#" class="cta-button cta-button-secondary" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
</div>
</div>
<script>
// Pricing toggle functionality
const monthlyToggle = document.getElementById('monthly-toggle');
const annualToggle = document.getElementById('annual-toggle');
// Price data
const prices = {
monthly: {
starter: '$29',
pro: '$79',
enterprise: '$199',
period: '/month',
starterBilling: 'Billed monthly',
proBilling: 'Billed monthly',
enterpriseBilling: 'Billed monthly'
},
annual: {
starter: '$23',
pro: '$63',
enterprise: '$159',
period: '/month',
starterBilling: 'Billed annually ($278)',
proBilling: 'Billed annually ($758)',
enterpriseBilling: 'Billed annually ($1,910)'
}
};
// Default to monthly
let currentPlan = 'monthly';
// Toggle functions
function setMonthly() {
currentPlan = 'monthly';
monthlyToggle.classList.add('active');
annualToggle.classList.remove('active');
updatePrices();
}
function setAnnual() {
currentPlan = 'annual';
annualToggle.classList.add('active');
monthlyToggle.classList.remove('active');
updatePrices();
}
function updatePrices() {
// Update all prices based on current plan
document.getElementById('starter-price').textContent = prices[currentPlan].starter;
document.getElementById('pro-price').textContent = prices[currentPlan].pro;
document.getElementById('enterprise-price').textContent = prices[currentPlan].enterprise;
document.getElementById('starter-period').textContent = prices[currentPlan].period;
document.getElementById('pro-period').textContent = prices[currentPlan].period;
document.getElementById('enterprise-period').textContent = prices[currentPlan].period;
document.getElementById('starter-billing').textContent = prices[currentPlan].starterBilling;
document.getElementById('pro-billing').textContent = prices[currentPlan].proBilling;
document.getElementById('enterprise-billing').textContent = prices[currentPlan].enterpriseBilling;
}
// Add event listeners
monthlyToggle.addEventListener('click', setMonthly);
annualToggle.addEventListener('click', setAnnual);
</script>
</section>
<!--
@type: Pricing
@industry: Business
@style: Modern
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 md:py-24">
<div class="container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl">
<!-- Heading -->
<div class="text-center max-w-3xl mx-auto mb-10">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Simple, transparent pricing</h2>
<p class="text-lg text-slate-600">Choose the plan that's right for your business and scale as you grow.</p>
</div>
<!-- Pricing Toggle - Újratervezett verzió -->
<div class="flex flex-col items-center justify-center mb-12">
<div class="bg-slate-100 p-1.5 rounded-xl inline-flex items-center mb-2">
<button id="monthly-toggle" class="relative px-6 py-2 rounded-lg text-sm font-medium transition-all duration-300 bg-indigo-600 text-white">
<span>Monthly</span>
</button>
<button id="annual-toggle" class="relative px-6 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-slate-700">
<span>Annual</span>
</button>
</div>
<p class="text-xs text-indigo-600 font-medium">Save 20% with annual billing</p>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Starter Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg border border-slate-200 flex flex-col h-full transition-colors duration-300">
<div class="mb-6">
<h3 class="text-xl font-bold text-slate-900 mb-2">Starter</h3>
<p class="text-slate-600">Perfect for small businesses just getting started.</p>
</div>
<div class="mb-6">
<div class="flex items-baseline">
<span class="text-4xl font-bold text-slate-900" id="starter-price">$29</span>
<span class="text-slate-600 ml-2" id="starter-period">/month</span>
</div>
<p class="text-sm text-slate-500 mt-2" id="starter-billing">Billed monthly or $278 annually</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Up to 5 team members</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">20GB storage</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Basic analytics</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Email support</span>
</li>
</ul>
<div class="mt-auto">
<a href="#" class="block w-full bg-white text-indigo-600 border border-indigo-600 px-6 py-3 rounded-lg text-center font-medium hover:bg-indigo-50 transition-colors" aria-label="Get started with Starter plan">Get started</a>
</div>
</div>
<!-- Professional Plan (Featured) -->
<div class="bg-white rounded-xl p-8 shadow-xl border-2 border-indigo-600 flex flex-col h-full relative transition-transform duration-300">
<div class="absolute top-0 right-0 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div>
<div class="mb-6">
<h3 class="text-xl font-bold text-slate-900 mb-2">Professional</h3>
<p class="text-slate-600">Ideal for growing businesses with more demands.</p>
</div>
<div class="mb-6">
<div class="flex items-baseline">
<span class="text-4xl font-bold text-slate-900" id="pro-price">$79</span>
<span class="text-slate-600 ml-2" id="pro-period">/month</span>
</div>
<p class="text-sm text-slate-500 mt-2" id="pro-billing">Billed monthly or $758 annually</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Up to 20 team members</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">100GB storage</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Advanced analytics</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Priority email & chat support</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Custom integrations</span>
</li>
</ul>
<div class="mt-auto">
<a href="#" class="block w-full bg-indigo-600 text-white px-6 py-3 rounded-lg text-center font-medium hover:bg-indigo-700 transition-colors" aria-label="Get started with Professional plan">Get started</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg border border-slate-200 flex flex-col h-full transition-transform duration-300">
<div class="mb-6">
<h3 class="text-xl font-bold text-slate-900 mb-2">Enterprise</h3>
<p class="text-slate-600">Advanced features for large organizations.</p>
</div>
<div class="mb-6">
<div class="flex items-baseline">
<span class="text-4xl font-bold text-slate-900" id="enterprise-price">$199</span>
<span class="text-slate-600 ml-2" id="enterprise-period">/month</span>
</div>
<p class="text-sm text-slate-500 mt-2" id="enterprise-billing">Billed monthly or $1,910 annually</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Unlimited team members</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Unlimited storage</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Enterprise analytics</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">24/7 dedicated support</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Custom development</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">SLA & dedicated account manager</span>
</li>
</ul>
<div class="mt-auto">
<a href="#" class="block w-full bg-white text-indigo-600 border border-indigo-600 px-6 py-3 rounded-lg text-center font-medium hover:bg-indigo-50 transition-colors" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
</div>
</div>
<script>
// Pricing toggle functionality with the new button-based toggle
const monthlyToggle = document.getElementById('monthly-toggle');
const annualToggle = document.getElementById('annual-toggle');
// Price data
const prices = {
monthly: {
starter: '$29',
pro: '$79',
enterprise: '$199',
period: '/month',
starterBilling: 'Billed monthly',
proBilling: 'Billed monthly',
enterpriseBilling: 'Billed monthly'
},
annual: {
starter: '$23',
pro: '$63',
enterprise: '$159',
period: '/month',
starterBilling: 'Billed annually ($278)',
proBilling: 'Billed annually ($758)',
enterpriseBilling: 'Billed annually ($1,910)'
}
};
// Default to monthly
let currentPlan = 'monthly';
// Toggle functions
function setMonthly() {
currentPlan = 'monthly';
monthlyToggle.classList.add('bg-indigo-600', 'text-white');
monthlyToggle.classList.remove('text-slate-700');
annualToggle.classList.remove('bg-indigo-600', 'text-white');
annualToggle.classList.add('text-slate-700');
updatePrices();
}
function setAnnual() {
currentPlan = 'annual';
annualToggle.classList.add('bg-indigo-600', 'text-white');
annualToggle.classList.remove('text-slate-700');
monthlyToggle.classList.remove('bg-indigo-600', 'text-white');
monthlyToggle.classList.add('text-slate-700');
updatePrices();
}
function updatePrices() {
// Update all prices based on current plan
document.getElementById('starter-price').textContent = prices[currentPlan].starter;
document.getElementById('pro-price').textContent = prices[currentPlan].pro;
document.getElementById('enterprise-price').textContent = prices[currentPlan].enterprise;
document.getElementById('starter-period').textContent = prices[currentPlan].period;
document.getElementById('pro-period').textContent = prices[currentPlan].period;
document.getElementById('enterprise-period').textContent = prices[currentPlan].period;
document.getElementById('starter-billing').textContent = prices[currentPlan].starterBilling;
document.getElementById('pro-billing').textContent = prices[currentPlan].proBilling;
document.getElementById('enterprise-billing').textContent = prices[currentPlan].enterpriseBilling;
}
// Add event listeners
monthlyToggle.addEventListener('click', setMonthly);
annualToggle.addEventListener('click', setAnnual);
</script>
</section>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page