Component:
Pricing Software Minimal
Colors:
Description:
This carefully crafted Pricing component is perfect for Software landing pages, featuring a Minimal 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: Software
@style: Minimal
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-900: #111827;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-indigo-200: #c7d2fe;
--color-green-100: #dcfce7;
--color-green-500: #22c55e;
--color-green-800: #166534;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.pricing-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.pricing-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.section-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.pricing-toggle {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3rem;
}
.toggle-container {
position: relative;
display: flex;
align-items: center;
padding: 0.25rem;
border-radius: 9999px;
border: 1px solid var(--color-gray-200);
}
.toggle-button {
position: relative;
width: 8rem;
border-radius: 9999px;
padding: 0.5rem 0;
font-size: 0.875rem;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.toggle-button[aria-pressed="true"] {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
.toggle-button[aria-pressed="false"] {
background-color: transparent;
color: var(--color-gray-700);
}
.toggle-button[aria-pressed="false"]:hover {
color: var(--color-gray-900);
}
.toggle-button:focus {
outline: none;
z-index: 10;
}
.save-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
background-color: var(--color-green-100);
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-green-800);
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: start;
}
@media (min-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pricing-card {
border-radius: 1rem;
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
transition: all 0.3s;
}
.pricing-card:hover {
border-color: var(--color-indigo-200);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.pricing-card--popular {
position: relative;
border: 2px solid var(--color-indigo-600);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.popular-badge {
position: absolute;
top: -1rem;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
border-radius: 9999px;
background-color: var(--color-indigo-600);
padding: 0.25rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-white);
}
.card-content {
padding: 2rem;
}
.plan-name {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.plan-description {
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
.price-container {
margin-top: 1.5rem;
}
.price {
display: flex;
align-items: baseline;
}
.price-amount {
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.price-period {
margin-left: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-500);
}
.billing-info {
margin-top: 0.25rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
.pricing-feature-list {
margin-top: 2rem;
list-style: none;
}
.pricing-feature-item {
display: flex;
align-items: flex-start;
margin-top: 1rem;
}
.pricing-feature-item:first-child {
margin-top: 0;
}
.pricing-feature-icon {
width: 1.5rem;
height: 1.5rem;
color: var(--color-green-500);
flex-shrink: 0;
}
.pricing-feature-text {
margin-left: 0.75rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
.cta-button {
display: block;
width: 100%;
margin-top: 2rem;
padding: 0.75rem 1rem;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
text-align: center;
text-decoration: none;
transition: all 0.2s;
}
.cta-button--outline {
border: 1px solid var(--color-indigo-600);
background-color: var(--color-white);
color: var(--color-indigo-600);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.cta-button--outline:hover {
background-color: var(--color-gray-50);
}
.cta-button--solid {
border: 1px solid transparent;
background-color: var(--color-indigo-600);
color: var(--color-white);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.cta-button--solid:hover {
background-color: var(--color-indigo-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-600);
}
.comparison-section {
margin-top: 4rem;
}
.comparison-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-gray-900);
text-align: center;
margin-bottom: 2rem;
}
.table-container {
overflow-x: auto;
overflow-y: hidden;
border-radius: 0.5rem;
border: 1px solid var(--color-gray-200);
}
.comparison-table {
min-width: 100%;
border-collapse: collapse;
}
.comparison-table th {
background-color: var(--color-gray-50);
padding: 0.875rem 0.75rem;
text-align: left;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gray-900);
}
.comparison-table th:first-child {
padding-left: 1.5rem;
}
.comparison-table th:not(:first-child) {
text-align: center;
}
.comparison-table td {
padding: 1rem 0.75rem;
font-size: 0.875rem;
border-top: 1px solid var(--color-gray-200);
}
.comparison-table td:first-child {
padding-left: 1.5rem;
color: var(--color-gray-900);
}
.comparison-table td:not(:first-child) {
text-align: center;
color: var(--color-gray-500);
}
</style>
<section class="pricing-section" aria-labelledby="pricing-heading">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<span class="header-badge">Pricing</span>
<h2 id="pricing-heading" class="header-title">
Simple, transparent pricing for every business
</h2>
<p class="header-description">
Choose the perfect plan that fits your business needs. No hidden fees, no surprises.
</p>
</div>
<!-- Pricing Toggle -->
<div class="pricing-toggle">
<div class="toggle-container">
<button type="button" class="toggle-button" aria-pressed="true">Monthly</button>
<button type="button" class="toggle-button" aria-pressed="false">Annual</button>
</div>
<div class="save-badge">
Save 20%
</div>
</div>
<!-- Pricing Cards -->
<div class="pricing-grid">
<!-- Starter Plan -->
<div class="pricing-card">
<div class="card-content">
<h3 class="plan-name">Starter</h3>
<p class="plan-description">Perfect for small businesses just getting started</p>
<div class="price-container">
<p class="price">
<span class="price-amount">$29</span>
<span class="price-period">/month</span>
</p>
<p class="billing-info">Billed monthly</p>
</div>
<ul class="pricing-feature-list">
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Up to 5 team members</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Basic reporting & analytics</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">5GB storage</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Email support</span>
</li>
</ul>
<a href="#starter" class="cta-button cta-button--outline" role="button" aria-label="Get started with Starter plan">
Get started
</a>
</div>
</div>
<!-- Professional Plan -->
<div class="pricing-card pricing-card--popular">
<div class="popular-badge">Most popular</div>
<div class="card-content">
<h3 class="plan-name">Professional</h3>
<p class="plan-description">For growing businesses ready to scale</p>
<div class="price-container">
<p class="price">
<span class="price-amount">$79</span>
<span class="price-period">/month</span>
</p>
<p class="billing-info">Billed monthly</p>
</div>
<ul class="pricing-feature-list">
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Up to 20 team members</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Advanced reporting & analytics</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">20GB storage</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Priority email & chat support</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Custom integrations</span>
</li>
</ul>
<a href="#professional" class="cta-button cta-button--solid" role="button" aria-label="Get started with Professional plan">
Get started
</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="pricing-card">
<div class="card-content">
<h3 class="plan-name">Enterprise</h3>
<p class="plan-description">Custom solutions for larger organizations</p>
<div class="price-container">
<p class="price">
<span class="price-amount">$199</span>
<span class="price-period">/month</span>
</p>
<p class="billing-info">Billed monthly</p>
</div>
<ul class="pricing-feature-list">
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Unlimited team members</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Custom reporting & analytics</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Unlimited storage</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">24/7 phone & priority support</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Dedicated account manager</span>
</li>
</ul>
<a href="#enterprise" class="cta-button cta-button--outline" role="button" aria-label="Contact sales for Enterprise plan">
Contact sales
</a>
</div>
</div>
</div>
<!-- Feature Comparison -->
<div class="comparison-section">
<h3 class="comparison-title">Compare plans in detail</h3>
<div class="table-container">
<table class="comparison-table">
<thead>
<tr>
<th>Features</th>
<th>Starter</th>
<th>Professional</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td>Team members</td>
<td>Up to 5</td>
<td>Up to 20</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Storage</td>
<td>5GB</td>
<td>20GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>API access</td>
<td>Basic</td>
<td>Advanced</td>
<td>Custom</td>
</tr>
<tr>
<td>Support</td>
<td>Email only</td>
<td>Email & chat</td>
<td>24/7 phone & priority</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const prices = {
starter: {
monthly: 29,
annual: Math.round(29 * 12 * 0.8)
},
professional: {
monthly: 79,
annual: Math.round(79 * 12 * 0.8)
},
enterprise: {
monthly: 199,
annual: Math.round(199 * 12 * 0.8)
}
};
const monthlyBtn = document.querySelector('[aria-pressed="true"]');
const annualBtn = document.querySelector('[aria-pressed="false"]');
const priceElements = document.querySelectorAll('.price-amount');
const billingTexts = document.querySelectorAll('.billing-info');
const periodTexts = document.querySelectorAll('.price-period');
function updatePrices(period) {
const plans = ['starter', 'professional', 'enterprise'];
priceElements.forEach((element, index) => {
const price = prices[plans[index]][period];
element.textContent = `$${price}`;
});
billingTexts.forEach(text => {
text.textContent = `Billed ${period === 'monthly' ? 'monthly' : 'annually'}`;
});
if (period === 'monthly') {
monthlyBtn.setAttribute('aria-pressed', 'true');
annualBtn.setAttribute('aria-pressed', 'false');
monthlyBtn.style.backgroundColor = 'var(--color-indigo-600)';
monthlyBtn.style.color = 'var(--color-white)';
annualBtn.style.backgroundColor = 'transparent';
annualBtn.style.color = 'var(--color-gray-700)';
} else {
annualBtn.setAttribute('aria-pressed', 'true');
monthlyBtn.setAttribute('aria-pressed', 'false');
annualBtn.style.backgroundColor = 'var(--color-indigo-600)';
annualBtn.style.color = 'var(--color-white)';
monthlyBtn.style.backgroundColor = 'transparent';
monthlyBtn.style.color = 'var(--color-gray-700)';
}
}
monthlyBtn.addEventListener('click', () => updatePrices('monthly'));
annualBtn.addEventListener('click', () => updatePrices('annual'));
});
</script>
<!--
@type: Pricing
@industry: Software
@style: Minimal
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="pricing-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<span class="text-lg font-semibold text-indigo-600">Pricing</span>
<h2 id="pricing-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Simple, transparent pricing for every business
</h2>
<p class="mt-4 text-lg text-gray-600">
Choose the perfect plan that fits your business needs. No hidden fees, no surprises.
</p>
</div>
<!-- Pricing Toggle -->
<div class="flex justify-center flex-wrap gap-4 mb-12">
<div class="relative flex items-center p-1 rounded-full border border-gray-200">
<button type="button" class="relative w-32 rounded-full bg-indigo-600 py-2 text-sm font-medium text-white focus:z-10 focus:outline-none" aria-pressed="true">Monthly</button>
<button type="button" class="relative w-32 rounded-full py-2 text-sm font-medium text-gray-700 hover:text-gray-900 focus:z-10 focus:outline-none" aria-pressed="false">Annual</button>
</div>
<div class="flex items-center">
<span class="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800">
Save 20%
</span>
</div>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3 lg:gap-8 items-start">
<!-- Starter Plan -->
<div class="rounded-2xl border border-gray-200 bg-white shadow-sm hover:border-indigo-200 hover:shadow-lg transition-all duration-300">
<div class="p-8">
<h3 class="text-lg font-medium text-gray-900">Starter</h3>
<p class="mt-2 text-sm text-gray-600">Perfect for small businesses just getting started</p>
<div class="mt-6">
<p class="flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900">$29</span>
<span class="ml-1 text-sm font-medium text-gray-500">/month</span>
</p>
<p class="mt-1 text-sm text-gray-500">Billed monthly</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Up to 5 team members</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Basic reporting & analytics</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">5GB storage</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Email support</span>
</li>
</ul>
<a href="#starter" class="mt-8 block w-full rounded-md border border-indigo-600 bg-white px-4 py-3 text-center text-sm font-medium text-indigo-600 shadow hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" role="button" aria-label="Get started with Starter plan">
Get started
</a>
</div>
</div>
<!-- Professional Plan -->
<div class="relative rounded-2xl border-2 border-indigo-600 bg-white shadow-xl">
<div class="absolute -top-4 left-1/2 -translate-x-1/2">
<span class="inline-flex items-center rounded-full bg-indigo-600 px-4 py-1 text-sm font-medium text-white">Most popular</span>
</div>
<div class="p-8">
<h3 class="text-lg font-medium text-gray-900">Professional</h3>
<p class="mt-2 text-sm text-gray-600">For growing businesses ready to scale</p>
<div class="mt-6">
<p class="flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900">$79</span>
<span class="ml-1 text-sm font-medium text-gray-500">/month</span>
</p>
<p class="mt-1 text-sm text-gray-500">Billed monthly</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Up to 20 team members</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Advanced reporting & analytics</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">20GB storage</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Priority email & chat support</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Custom integrations</span>
</li>
</ul>
<a href="#professional" class="mt-8 block w-full rounded-md border border-transparent bg-indigo-600 px-4 py-3 text-center text-sm font-medium text-white shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" role="button" aria-label="Get started with Professional plan">
Get started
</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="rounded-2xl border border-gray-200 bg-white shadow-sm hover:border-indigo-200 hover:shadow-lg transition-all duration-300">
<div class="p-8">
<h3 class="text-lg font-medium text-gray-900">Enterprise</h3>
<p class="mt-2 text-sm text-gray-600">Custom solutions for larger organizations</p>
<div class="mt-6">
<p class="flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900">$199</span>
<span class="ml-1 text-sm font-medium text-gray-500">/month</span>
</p>
<p class="mt-1 text-sm text-gray-500">Billed monthly</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Unlimited team members</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Custom reporting & analytics</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Unlimited storage</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">24/7 phone & priority support</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Dedicated account manager</span>
</li>
</ul>
<a href="#enterprise" class="mt-8 block w-full rounded-md border border-indigo-600 bg-white px-4 py-3 text-center text-sm font-medium text-indigo-600 shadow hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" role="button" aria-label="Contact sales for Enterprise plan">
Contact sales
</a>
</div>
</div>
</div>
<!-- Feature Comparison -->
<div class="mt-16">
<h3 class="text-xl font-bold text-gray-900 text-center mb-8">Compare plans in detail</h3>
<div class="overflow-x-auto overflow-y-hidden rounded-lg border border-gray-200">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr class="bg-gray-50">
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Features</th>
<th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Starter</th>
<th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Professional</th>
<th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Enterprise</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr>
<td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">Team members</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Up to 5</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Up to 20</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">Storage</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">5GB</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">20GB</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">API access</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Basic</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Advanced</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Custom</td>
</tr>
<tr>
<td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">Support</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Email only</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Email & chat</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">24/7 phone & priority</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const prices = {
starter: {
monthly: 29,
annual: Math.round(29 * 12 * 0.8)
},
professional: {
monthly: 79,
annual: Math.round(79 * 12 * 0.8)
},
enterprise: {
monthly: 199,
annual: Math.round(199 * 12 * 0.8)
}
};
const monthlyBtn = document.querySelector('[aria-pressed="true"]');
const annualBtn = document.querySelector('[aria-pressed="false"]');
const priceElements = document.querySelectorAll('.text-4xl.font-bold');
const billingTexts = document.querySelectorAll('.text-sm.text-gray-500');
const periodTexts = document.querySelectorAll('.ml-1.text-sm.font-medium.text-gray-500');
function updatePrices(period) {
const plans = ['starter', 'professional', 'enterprise'];
priceElements.forEach((element, index) => {
const price = prices[plans[index]][period];
element.textContent = `$${price}`;
});
billingTexts.forEach(text => {
text.textContent = `Billed ${period === 'monthly' ? 'monthly' : 'annually'}`;
});
if (period === 'monthly') {
monthlyBtn.classList.add('bg-indigo-600', 'text-white');
monthlyBtn.classList.remove('text-gray-700');
annualBtn.classList.remove('bg-indigo-600', 'text-white');
annualBtn.classList.add('text-gray-700');
monthlyBtn.setAttribute('aria-pressed', 'true');
annualBtn.setAttribute('aria-pressed', 'false');
} else {
annualBtn.classList.add('bg-indigo-600', 'text-white');
annualBtn.classList.remove('text-gray-700');
monthlyBtn.classList.remove('bg-indigo-600', 'text-white');
monthlyBtn.classList.add('text-gray-700');
annualBtn.setAttribute('aria-pressed', 'true');
monthlyBtn.setAttribute('aria-pressed', 'false');
}
}
monthlyBtn.addEventListener('click', () => updatePrices('monthly'));
annualBtn.addEventListener('click', () => updatePrices('annual'));
});
</script>
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