Choose from various pricing components and tables and customize them to fit your needs.
Choose the plan that fits your needs
Perfect for individuals
Perfect for small teams
Perfect for large teams
<section class="pricing-basic">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold mb-3">Simple Pricing Plans</h2>
<p class="lead">Choose the plan that fits your needs</p>
<div class="pricing-toggle mt-4">
<button class="pricing-toggle-btn active" id="monthly-toggle">Monthly</button>
<button class="pricing-toggle-btn" id="yearly-toggle">Yearly</button>
</div>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="pricing-card">
<div class="text-center">
<h3 class="fw-bold">Basic</h3>
<div class="price monthly-price">$19<small>/mo</small></div>
<div class="price yearly-price" style="display: none;">$190<small>/yr</small></div>
<p>Perfect for individuals</p>
</div>
<ul class="feature-list">
<li><i class="fas fa-check text-success"></i> 5 Projects</li>
<li><i class="fas fa-check text-success"></i> 20GB Storage</li>
<li><i class="fas fa-check text-success"></i> Basic Support</li>
<li class="text-muted"><i class="fas fa-times text-danger"></i> Advanced Features</li>
<li class="text-muted"><i class="fas fa-times text-danger"></i> Custom Branding</li>
</ul>
<div class="text-center">
<a href="#" class="btn btn-outline-primary">Choose Basic</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="pricing-card featured">
<div class="text-center">
<div class="badge bg-primary mb-3">Popular</div>
<h3 class="fw-bold">Pro</h3>
<div class="price monthly-price">$49<small>/mo</small></div>
<div class="price yearly-price" style="display: none;">$490<small>/yr</small></div>
<p>Perfect for small teams</p>
</div>
<ul class="feature-list">
<li><i class="fas fa-check text-success"></i> 20 Projects</li>
<li><i class="fas fa-check text-success"></i> 50GB Storage</li>
<li><i class="fas fa-check text-success"></i> Priority Support</li>
<li><i class="fas fa-check text-success"></i> Advanced Features</li>
<li class="text-muted"><i class="fas fa-times text-danger"></i> Custom Branding</li>
</ul>
<div class="text-center">
<a href="#" class="btn btn-primary">Choose Pro</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="pricing-card">
<div class="text-center">
<h3 class="fw-bold">Enterprise</h3>
<div class="price monthly-price">$99<small>/mo</small></div>
<div class="price yearly-price" style="display: none;">$990<small>/yr</small></div>
<p>Perfect for large teams</p>
</div>
<ul class="feature-list">
<li><i class="fas fa-check text-success"></i> Unlimited Projects</li>
<li><i class="fas fa-check text-success"></i> 250GB Storage</li>
<li><i class="fas fa-check text-success"></i> 24/7 Support</li>
<li><i class="fas fa-check text-success"></i> Advanced Features</li>
<li><i class="fas fa-check text-success"></i> Custom Branding</li>
</ul>
<div class="text-center">
<a href="#" class="btn btn-outline-primary">Choose Enterprise</a>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.pricing-basic {
padding: 4rem 0;
background-color: #ffffff;
}
.pricing-card {
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 2rem;
transition: all 0.3s ease;
height: 100%;
background-color: #ffffff;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.pricing-card.featured {
border: 2px solid #007bff;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.price {
font-size: 2.5rem;
font-weight: 700;
margin: 1rem 0;
color: #212529;
}
.feature-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.feature-list li {
padding: 0.5rem 0;
display: flex;
align-items: center;
color: #212529;
}
.feature-list i {
margin-right: 0.5rem;
}
.pricing-toggle {
background-color: #f8f9fa;
border-radius: 50px;
padding: 0.5rem;
display: inline-flex;
margin-bottom: 2rem;
}
.pricing-toggle-btn {
padding: 0.5rem 1.5rem;
border-radius: 50px;
border: none;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
color: #212529;
}
.pricing-toggle-btn.active {
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-primary, .bg-primary {
background-color: #007bff !important;
border-color: #007bff !important;
}
.btn-outline-primary {
color: #007bff;
border-color: #007bff;
}
.text-success {
color: #28a745 !important;
}
.text-danger {
color: #dc3545 !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const monthlyToggle = document.getElementById('monthly-toggle');
const yearlyToggle = document.getElementById('yearly-toggle');
const monthlyPrices = document.querySelectorAll('.monthly-price');
const yearlyPrices = document.querySelectorAll('.yearly-price');
monthlyToggle.addEventListener('click', function() {
monthlyToggle.classList.add('active');
yearlyToggle.classList.remove('active');
monthlyPrices.forEach(price => {
price.style.display = 'block';
});
yearlyPrices.forEach(price => {
price.style.display = 'none';
});
});
yearlyToggle.addEventListener('click', function() {
yearlyToggle.classList.add('active');
monthlyToggle.classList.remove('active');
monthlyPrices.forEach(price => {
price.style.display = 'none';
});
yearlyPrices.forEach(price => {
price.style.display = 'block';
});
});
});
</script>Find the plan that suits your needs
| Features | Basic | Pro | Enterprise |
|---|---|---|---|
| Price |
$19/mo
|
$49/mo
|
$99/mo
|
| Users | 1 user | 5 users | Unlimited |
| Storage | 20GB | 50GB | 250GB |
| Projects | 5 projects | 20 projects | Unlimited |
| Support | Email support | Priority support | 24/7 support |
| Advanced Features | |||
| Custom Branding | |||
| Choose Basic | Choose Pro | Choose Enterprise |
<section class="pricing-table">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold mb-3">Compare Plans</h2>
<p class="lead">Find the plan that suits your needs</p>
<div class="pricing-toggle mt-4">
<button class="pricing-toggle-btn active" id="table-monthly-toggle">Monthly</button>
<button class="pricing-toggle-btn" id="table-yearly-toggle">Yearly</button>
<div class="pricing-toggle mt-4">
<button class="pricing-toggle-btn active" id="table-monthly-toggle">Monthly</button>
<button class="pricing-toggle-btn" id="table-yearly-toggle">Yearly</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead class="pricing-table-header">
<tr>
<th scope="col">Features</th>
<th scope="col" class="text-center">Basic</th>
<th scope="col" class="text-center table-highlight">Pro</th>
<th scope="col" class="text-center">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Price</th>
<td class="text-center">
<div class="monthly-price">$19/mo</div>
<div class="yearly-price" style="display: none;">$190/yr</div>
</td>
<td class="text-center table-highlight">
<div class="monthly-price">$49/mo</div>
<div class="yearly-price" style="display: none;">$490/yr</div>
</td>
<td class="text-center">
<div class="monthly-price">$99/mo</div>
<div class="yearly-price" style="display: none;">$990/yr</div>
</td>
</tr>
<tr>
<th scope="row">Users</th>
<td class="text-center">1 user</td>
<td class="text-center table-highlight">5 users</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<th scope="row">Storage</th>
<td class="text-center">20GB</td>
<td class="text-center table-highlight">50GB</td>
<td class="text-center">250GB</td>
</tr>
<tr>
<th scope="row">Projects</th>
<td class="text-center">5 projects</td>
<td class="text-center table-highlight">20 projects</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<th scope="row">Support</th>
<td class="text-center">Email support</td>
<td class="text-center table-highlight">Priority support</td>
<td class="text-center">24/7 support</td>
</tr>
<tr>
<th scope="row">Advanced Features</th>
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
<td class="text-center table-highlight"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<th scope="row">Custom Branding</th>
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
<td class="text-center table-highlight"><i class="fas fa-times text-danger"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<th scope="row"></th>
<td class="text-center">
<a href="#" class="btn btn-outline-primary">Choose Basic</a>
</td>
<td class="text-center table-highlight">
<a href="#" class="btn btn-primary">Choose Pro</a>
</td>
<td class="text-center">
<a href="#" class="btn btn-outline-primary">Choose Enterprise</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<style>
.pricing-table {
padding: 4rem 0;
background-color: #f8f9fa;
}
.pricing-table-header {
background-color: #007bff;
color: white;
}
.table-highlight {
background-color: rgba(0, 123, 255, 0.1);
}
.pricing-toggle {
background-color: #e9ecef;
border-radius: 50px;
padding: 0.5rem;
display: inline-flex;
margin-bottom: 2rem;
}
.pricing-toggle-btn {
padding: 0.5rem 1.5rem;
border-radius: 50px;
border: none;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.pricing-toggle-btn.active {
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.text-success {
color: #28a745 !important;
}
.text-danger {
color: #dc3545 !important;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-outline-primary {
color: #007bff;
border-color: #007bff;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const monthlyToggle = document.getElementById('table-monthly-toggle');
const yearlyToggle = document.getElementById('table-yearly-toggle');
const monthlyPrices = document.querySelectorAll('.monthly-price');
const yearlyPrices = document.querySelectorAll('.yearly-price');
monthlyToggle.addEventListener('click', function() {
monthlyToggle.classList.add('active');
yearlyToggle.classList.remove('active');
monthlyPrices.forEach(price => {
price.style.display = 'block';
});
yearlyPrices.forEach(price => {
price.style.display = 'none';
});
});
yearlyToggle.addEventListener('click', function() {
yearlyToggle.classList.add('active');
monthlyToggle.classList.remove('active');
monthlyPrices.forEach(price => {
price.style.display = 'none';
});
yearlyPrices.forEach(price => {
price.style.display = 'block';
});
});
});
</script>See which plan is right for you
| Feature | Basic $19/mo |
Pro $49/mo |
Enterprise $99/mo |
|---|---|---|---|
| Number of users | 1 | 5 | Unlimited |
| Storage space | 20GB | 50GB | 250GB |
| Email support | |||
| Phone support | |||
| 24/7 support | |||
| Advanced analytics | |||
| Custom reports | |||
| API access | |||
| Customizable dashboard | |||
| Custom branding | |||
| Single sign-on (SSO) | |||
| Choose Basic | Choose Pro | Choose Enterprise |
<section class="comparison-table">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold mb-3">Feature Comparison</h2>
<p class="lead">See which plan is right for you</p>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th style="width: 40%;">Feature</th>
<th class="text-center">Basic<br><span class="text-muted">$19/mo</span></th>
<th class="text-center">Pro<br><span class="text-muted">$49/mo</span></th>
<th class="text-center">Enterprise<br><span class="text-muted">$99/mo</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Number of users</td>
<td class="text-center">1</td>
<td class="text-center">5</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<td>Storage space</td>
<td class="text-center">20GB</td>
<td class="text-center">50GB</td>
<td class="text-center">250GB</td>
</tr>
<tr>
<td>Email support</td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
</tr>
<tr>
<td>Phone support</td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
</tr>
<tr>
<td>24/7 support</td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
</tr>
<tr>
<td>Advanced analytics</td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
</tr>
<tr>
<td>Custom reports</td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
</tr>
<tr>
<td>API access</td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
</tr>
<tr>
<td>Customizable dashboard</td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
</tr>
<tr>
<td>Custom branding</td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
</tr>
<tr>
<td>Single sign-on (SSO)</td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-times comparison-x"></i></td>
<td class="text-center"><i class="fas fa-check comparison-check"></i></td>
</tr>
<tr>
<td></td>
<td class="text-center">
<a href="#" class="btn btn-outline-primary">Choose Basic</a>
</td>
<td class="text-center">
<a href="#" class="btn btn-outline-primary">Choose Pro</a>
</td>
<td class="text-center">
<a href="#" class="btn btn-primary">Choose Enterprise</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<style>
.comparison-table {
padding: 4rem 0;
background-color: #ffffff;
}
.comparison-check {
color: #28a745;
font-size: 1.2rem;
}
.comparison-x {
color: #dc3545;
font-size: 1.2rem;
}
.table thead th {
color: #212529;
font-weight: 700;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-outline-primary {
color: #007bff;
border-color: #007bff;
}
</style>Save up to 20% with annual billing
Billed monthly
Billed monthly
Billed monthly
<section class="pricing-section">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold mb-2">Flexible Pricing Plans</h2>
<p class="lead mb-4">Save up to 20% with annual billing</p>
<div class="d-flex align-items-center justify-content-center gap-2 mb-4">
<span>Monthly</span>
<div class="form-check form-switch mx-2">
<input class="form-check-input" type="checkbox" id="billing-toggle" style="width: 3em; height: 1.5em;">
<label class="form-check-label" for="billing-toggle"></label>
</div>
<span>Yearly <span class="badge bg-success">20% off</span></span>
</div>
</div>
<div class="row g-4 justify-content-center">
<div class="col-md-4">
<div class="card h-100 shadow-sm pricing-card">
<div class="card-body p-4">
<h4 class="card-title fw-bold text-center">Starter</h4>
<div class="text-center my-4">
<h3 class="monthly-price">$19<small>/month</small></h3>
<h3 class="yearly-price" style="display: none;">$15<small>/month</small></h3>
<p class="text-muted">Billed <span class="monthly-price">monthly</span><span class="yearly-price" style="display: none;">annually ($180)</span></p>
</div>
<hr>
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Single user</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>5 projects</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>20GB storage</li>
<li class="mb-2 text-muted"><i class="fas fa-times text-danger me-2"></i>Priority support</li>
<li class="mb-2 text-muted"><i class="fas fa-times text-danger me-2"></i>Advanced features</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary">Get Started</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow pricing-card" style="border-color: #007bff;">
<div class="card-header text-center bg-primary text-white py-3">
<span class="badge bg-white text-primary">MOST POPULAR</span>
</div>
<div class="card-body p-4">
<h4 class="card-title fw-bold text-center">Pro</h4>
<div class="text-center my-4">
<h3 class="monthly-price">$49<small>/month</small></h3>
<h3 class="yearly-price" style="display: none;">$39<small>/month</small></h3>
<p class="text-muted">Billed <span class="monthly-price">monthly</span><span class="yearly-price" style="display: none;">annually ($468)</span></p>
</div>
<hr>
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 5 users</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>20 projects</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>50GB storage</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Priority support</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Advanced features</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm pricing-card">
<div class="card-body p-4">
<h4 class="card-title fw-bold text-center">Enterprise</h4>
<div class="text-center my-4">
<h3 class="monthly-price">$99<small>/month</small></h3>
<h3 class="yearly-price" style="display: none;">$79<small>/month</small></h3>
<p class="text-muted">Billed <span class="monthly-price">monthly</span><span class="yearly-price" style="display: none;">annually ($948)</span></p>
</div>
<hr>
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Unlimited users</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Unlimited projects</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>250GB storage</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>24/7 support</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Custom branding</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.pricing-section {
padding: 4rem 0;
background-color: #f8f9fa;
}
.pricing-card {
background-color: #ffffff;
transition: all 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.card-title {
color: #212529;
}
.bg-primary {
background-color: #007bff !important;
}
.text-primary {
color: #007bff !important;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-outline-primary {
color: #007bff;
border-color: #007bff;
}
.text-success {
color: #28a745 !important;
}
.text-danger {
color: #dc3545 !important;
}
.form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const billingToggle = document.getElementById('billing-toggle');
const monthlyPrices = document.querySelectorAll('.monthly-price');
const yearlyPrices = document.querySelectorAll('.yearly-price');
billingToggle.addEventListener('change', function() {
if (this.checked) {
monthlyPrices.forEach(price => {
price.style.display = 'none';
});
yearlyPrices.forEach(price => {
price.style.display = 'block';
});
} else {
monthlyPrices.forEach(price => {
price.style.display = 'block';
});
yearlyPrices.forEach(price => {
price.style.display = 'none';
});
}
});
});
</script>