Component:
Pricing SaaS Minimal
Colors:
Description:
This carefully crafted Pricing component is perfect for SaaS 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: SaaS
@style: Minimal
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<!-- Pricing Table Component -->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-green-500: #22c55e;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Base Styles */
.pricing-section {
background-color: var(--color-white);
padding: 4rem 1rem;
font-family: var(--font-sans);
}
.container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
/* Header */
.pricing-header {
text-align: center;
max-width: 42rem;
margin: 0 auto 2rem;
}
.pricing-title {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.pricing-description {
font-size: 1.125rem;
color: var(--color-gray-600);
margin-top: 1rem;
}
/* Toggle Switch */
.toggle-container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
}
.toggle-label {
font-size: 0.875rem;
color: var(--color-gray-600);
}
.toggle-label-active {
color: var(--color-gray-900);
font-weight: 500;
}
.toggle-switch {
position: relative;
display: inline-flex;
height: 1.5rem;
width: 2.75rem;
flex-shrink: 0;
cursor: pointer;
border-radius: 9999px;
border: 2px solid transparent;
background-color: var(--color-gray-200);
transition: background-color 0.2s ease-in-out;
}
.toggle-switch:focus {
outline: none;
ring: 2px solid var(--color-blue-600);
ring-offset: 2px;
}
.toggle-switch.active {
background-color: var(--color-blue-600);
}
.toggle-button {
pointer-events: none;
display: inline-block;
height: 1.25rem;
width: 1.25rem;
transform: translateX(0);
border-radius: 9999px;
background-color: var(--color-white);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
transition: transform 0.2s ease-in-out;
}
.toggle-switch.active .toggle-button {
transform: translateX(100%);
}
.savings-tag {
color: var(--color-green-500);
}
/* Pricing Cards Grid */
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
/* Pricing Card */
.pricing-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 1rem;
border: 1px solid var(--color-gray-200);
padding: 2rem;
box-shadow: var(--shadow-sm);
transition: border-color 0.3s, box-shadow 0.3s;
}
.pricing-card:hover {
border-color: var(--color-gray-300);
box-shadow: var(--shadow-lg);
}
.pricing-card.featured {
border: 2px solid var(--color-blue-600);
box-shadow: var(--shadow-lg);
}
.popular-badge {
position: absolute;
top: -1rem;
right: 2rem;
display: inline-flex;
align-items: center;
border-radius: 9999px;
background-color: var(--color-blue-600);
padding: 0.25rem 1rem;
font-size: 0.875rem;
color: var(--color-white);
}
.card-header {
margin-bottom: 1.5rem;
}
.plan-name {
font-size: 1.25rem;
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: 1rem;
display: flex;
align-items: baseline;
}
.price {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-gray-900);
letter-spacing: -0.025em;
}
.price-period {
margin-left: 0.25rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Pricing List */
.pricing-list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
.pricing-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.pricing-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-blue-600);
}
.pricing-text {
margin-left: 0.75rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Action Button */
.action-button {
display: block;
width: 100%;
margin-top: 2rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
text-align: center;
text-decoration: none;
transition: background-color 0.15s;
}
.action-button-outline {
border: 1px solid var(--color-gray-300);
background-color: var(--color-white);
color: var(--color-gray-900);
}
.action-button-outline:hover {
background-color: var(--color-gray-50);
}
.action-button-primary {
background-color: var(--color-blue-600);
color: var(--color-white);
border: none;
}
.action-button-primary:hover {
background-color: var(--color-blue-700);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.pricing-section {
padding: 6rem 1.5rem;
}
.pricing-title {
font-size: 2.25rem;
}
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
.container {
padding: 0 2rem;
}
}
</style>
<section class="pricing-section" aria-labelledby="pricing-heading">
<div class="container">
<!-- Header -->
<div class="pricing-header">
<h2 id="pricing-heading" class="pricing-title">
Simple, transparent pricing
</h2>
<p class="pricing-description">
Choose the perfect plan for your business needs. All plans include a 14-day free trial.
</p>
</div>
<!-- Toggle Annual/Monthly -->
<div class="toggle-container">
<span class="toggle-label">Monthly</span>
<button type="button" class="toggle-switch" role="switch" aria-checked="false" id="billing-toggle">
<span class="toggle-button" id="billing-toggle-button"></span>
</button>
<span class="toggle-label toggle-label-active">Annual <span class="savings-tag">(Save 20%)</span></span>
</div>
<!-- Pricing Cards -->
<div class="pricing-grid">
<!-- Starter Plan -->
<div class="pricing-card">
<div class="card-header">
<h3 class="plan-name">Starter</h3>
<p class="plan-description">Perfect for small teams just getting started</p>
<div class="price-container">
<span class="price" id="starter-price">$29</span>
<span class="price-period">/month</span>
</div>
</div>
<ul class="pricing-list">
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">Up to 5 team members</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">20GB storage</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">Basic analytics</span>
</li>
</ul>
<a href="#" class="action-button action-button-outline" aria-label="Get started with Starter plan">Get started</a>
</div>
<!-- Pro Plan (Featured) -->
<div class="pricing-card featured">
<div class="popular-badge">Most popular</div>
<div class="card-header">
<h3 class="plan-name">Pro</h3>
<p class="plan-description">For growing teams ready to scale</p>
<div class="price-container">
<span class="price" id="pro-price">$79</span>
<span class="price-period">/month</span>
</div>
</div>
<ul class="pricing-list">
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">Up to 20 team members</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">100GB storage</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">Advanced analytics</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">Priority support</span>
</li>
</ul>
<a href="#" class="action-button action-button-primary" aria-label="Get started with Pro plan">Get started</a>
</div>
<!-- Enterprise Plan -->
<div class="pricing-card">
<div class="card-header">
<h3 class="plan-name">Enterprise</h3>
<p class="plan-description">Custom solutions for large organizations</p>
<div class="price-container">
<span class="price" id="enterprise-price">$299</span>
<span class="price-period">/month</span>
</div>
</div>
<ul class="pricing-list">
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">Unlimited team members</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">1TB storage</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">Custom analytics</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">24/7 dedicated support</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="feature-text">Custom integrations</span>
</li>
</ul>
<a href="#" class="action-button action-button-outline" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('billing-toggle');
const toggleButton = document.getElementById('billing-toggle-button');
const starterPrice = document.getElementById('starter-price');
const proPrice = document.getElementById('pro-price');
const enterprisePrice = document.getElementById('enterprise-price');
let isAnnual = false;
const prices = {
monthly: {
starter: '$29',
pro: '$79',
enterprise: '$299'
},
annual: {
starter: '$23',
pro: '$63',
enterprise: '$239'
}
};
toggle.addEventListener('click', function() {
isAnnual = !isAnnual;
toggle.classList.toggle('active');
toggle.setAttribute('aria-checked', isAnnual);
// Update prices
starterPrice.textContent = isAnnual ? prices.annual.starter : prices.monthly.starter;
proPrice.textContent = isAnnual ? prices.annual.pro : prices.monthly.pro;
enterprisePrice.textContent = isAnnual ? prices.annual.enterprise : prices.monthly.enterprise;
});
});
</script>
<!--
@type: Pricing
@industry: SaaS
@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">
<!-- Header -->
<div class="text-center max-w-2xl mx-auto mb-8">
<h2 id="pricing-heading" class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">
Simple, transparent pricing
</h2>
<p class="mt-4 text-lg text-gray-600">
Choose the perfect plan for your business needs. All plans include a 14-day free trial.
</p>
</div>
<!-- Toggle Annual/Monthly -->
<div class="flex justify-center items-center gap-4 mb-12">
<span class="text-sm text-gray-600">Monthly</span>
<button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 bg-gray-200" role="switch" aria-checked="true" id="billing-toggle">
<span class="translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" id="billing-toggle-button"></span>
</button>
<span class="text-sm text-gray-900 font-medium">Annual <span class="text-green-500">(Save 20%)</span></span>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<!-- Starter Plan -->
<div class="relative flex flex-col rounded-2xl border border-gray-200 p-8 shadow-sm hover:border-gray-300 hover:shadow transition duration-300">
<div class="mb-6">
<h3 class="text-xl font-medium text-gray-900">Starter</h3>
<p class="mt-2 text-sm text-gray-600">Perfect for small teams just getting started</p>
<div class="mt-4 flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900" id="starter-price">$29</span>
<span class="ml-1 text-sm text-gray-600">/month</span>
</div>
</div>
<ul role="list" class="space-y-4 flex-1">
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">Up to 5 team members</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">20GB storage</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">Basic analytics</span>
</li>
</ul>
<a href="#" class="mt-8 block w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 transition duration-150" aria-label="Get started with Starter plan">Get started</a>
</div>
<!-- Pro Plan (Featured) -->
<div class="relative flex flex-col rounded-2xl border-2 border-blue-600 p-8 shadow-lg">
<div class="absolute -top-4 right-8 inline-flex items-center rounded-full bg-blue-600 px-4 py-1 text-sm text-white">Most popular</div>
<div class="mb-6">
<h3 class="text-xl font-medium text-gray-900">Pro</h3>
<p class="mt-2 text-sm text-gray-600">For growing teams ready to scale</p>
<div class="mt-4 flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900" id="pro-price">$79</span>
<span class="ml-1 text-sm text-gray-600">/month</span>
</div>
</div>
<ul role="list" class="space-y-4 flex-1">
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">Up to 20 team members</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">100GB storage</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">Advanced analytics</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">Priority support</span>
</li>
</ul>
<a href="#" class="mt-8 block w-full rounded-lg bg-blue-600 px-4 py-2 text-center text-sm font-medium text-white hover:bg-blue-700 transition duration-150" aria-label="Get started with Pro plan">Get started</a>
</div>
<!-- Enterprise Plan -->
<div class="relative flex flex-col rounded-2xl border border-gray-200 p-8 shadow-sm hover:border-gray-300 hover:shadow transition duration-300">
<div class="mb-6">
<h3 class="text-xl font-medium text-gray-900">Enterprise</h3>
<p class="mt-2 text-sm text-gray-600">Custom solutions for large organizations</p>
<div class="mt-4 flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900" id="enterprise-price">$299</span>
<span class="ml-1 text-sm text-gray-600">/month</span>
</div>
</div>
<ul role="list" class="space-y-4 flex-1">
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">Unlimited team members</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">1TB storage</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">Custom analytics</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">24/7 dedicated support</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" 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" />
</svg>
<span class="ml-3 text-sm text-gray-600">Custom integrations</span>
</li>
</ul>
<a href="#" class="mt-8 block w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 transition duration-150" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('billing-toggle');
const toggleButton = document.getElementById('billing-toggle-button');
const starterPrice = document.getElementById('starter-price');
const proPrice = document.getElementById('pro-price');
const enterprisePrice = document.getElementById('enterprise-price');
let isAnnual = false;
const prices = {
monthly: {
starter: '$29',
pro: '$79',
enterprise: '$299'
},
annual: {
starter: '$23',
pro: '$63',
enterprise: '$239'
}
};
toggle.addEventListener('click', function() {
isAnnual = !isAnnual;
toggleButton.style.transform = isAnnual ? 'translateX(100%)' : 'translateX(0)';
toggle.setAttribute('aria-checked', isAnnual);
// Update toggle background color
if (isAnnual) {
toggle.classList.remove('bg-gray-200');
toggle.classList.add('bg-blue-600');
} else {
toggle.classList.remove('bg-blue-600');
toggle.classList.add('bg-gray-200');
}
// Update prices
starterPrice.textContent = isAnnual ? prices.annual.starter : prices.monthly.starter;
proPrice.textContent = isAnnual ? prices.annual.pro : prices.monthly.pro;
enterprisePrice.textContent = isAnnual ? prices.annual.enterprise : prices.monthly.enterprise;
});
});
</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