<!--
@type: Pricing
@industry: Marketing
@style: Dark
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-gray-300: rgb(209, 213, 219);
--color-gray-700: rgb(55, 65, 81);
--color-gray-800: rgb(31, 41, 55);
--color-gray-900: rgb(17, 24, 39);
--color-blue-400: rgb(96, 165, 250);
--color-blue-500: rgb(59, 130, 246);
--color-blue-600: rgb(37, 99, 235);
--color-blue-700: rgb(29, 78, 216);
--color-white: rgb(255, 255, 255);
/* Spacing */
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
}
/* Reset */
* {
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";
}
/* Component Styles */
.pricing-section {
background-color: var(--color-gray-900);
padding: var(--spacing-16) var(--spacing-4);
}
.header {
text-align: center;
}
.header h2 {
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
}
.header p {
margin-top: var(--spacing-4);
font-size: 1.125rem;
color: var(--color-gray-300);
}
/* Toggle Switch */
.toggle-container {
margin-top: var(--spacing-12);
display: flex;
justify-content: center;
}
.toggle-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-4);
}
.toggle-label {
font-size: 0.875rem;
color: var(--color-gray-300);
user-select: none;
}
.toggle-button {
position: relative;
display: inline-flex;
height: 1.5rem;
width: 2.75rem;
align-items: center;
border: none;
border-radius: 9999px;
background-color: var(--color-blue-600);
transition: all 0.2s ease;
cursor: pointer;
}
.toggle-button:hover {
background-color: var(--color-blue-700);
}
.toggle-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-blue-500), 0 0 0 4px rgba(59, 130, 246, 0.2);
}
.toggle-knob {
position: absolute;
left: 0.25rem;
height: 1rem;
width: 1rem;
border-radius: 9999px;
background-color: var(--color-white);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.toggle-button[aria-checked="true"] .toggle-knob {
transform: translateX(0);
}
.toggle-discount {
color: var(--color-blue-400);
font-weight: 500;
}
/* Pricing Cards Grid */
.pricing-grid {
margin-top: var(--spacing-12);
display: grid;
gap: var(--spacing-8);
}
.pricing-card {
display: flex;
flex-direction: column;
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
border-radius: 1rem;
padding: var(--spacing-8);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.pricing-card.popular {
border: 2px solid var(--color-blue-500);
position: relative;
}
.popular-badge {
position: absolute;
top: -1rem;
left: 50%;
transform: translateX(-50%);
background-color: var(--color-blue-500);
color: var(--color-white);
padding: 0.25rem var(--spacing-4);
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
}
.pricing-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-white);
}
.pricing-card p {
margin-top: var(--spacing-4);
font-size: 0.875rem;
color: var(--color-gray-300);
}
.price {
margin-top: var(--spacing-6);
}
.price-amount {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-white);
}
.price-period {
font-size: 0.875rem;
color: var(--color-gray-300);
}
.feature-list {
margin-top: var(--spacing-8);
list-style: none;
flex: 1;
}
.feature-item {
display: flex;
align-items: center;
color: var(--color-gray-300);
margin-bottom: var(--spacing-4);
}
.feature-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-blue-400);
margin-right: 0.75rem;
}
.cta-button {
margin-top: var(--spacing-8);
display: block;
width: 100%;
padding: 0.75rem var(--spacing-6);
border-radius: 0.5rem;
background-color: var(--color-blue-600);
color: var(--color-white);
font-size: 0.875rem;
font-weight: 600;
text-align: center;
text-decoration: none;
transition: background-color 0.2s;
border: none;
cursor: pointer;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-blue-500), 0 0 0 4px rgba(59, 130, 246, 0.1);
}
/* FAQ Section */
.faq-section {
margin-top: var(--spacing-16);
}
.faq-header {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-white);
text-align: center;
margin-bottom: var(--spacing-8);
}
.faq-grid {
display: grid;
gap: var(--spacing-6);
}
.faq-item {
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
border-radius: 0.5rem;
padding: var(--spacing-6);
}
.faq-question {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 0.75rem;
}
.faq-answer {
color: var(--color-gray-300);
line-height: 1.5;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.pricing-section {
padding: var(--spacing-24) var(--spacing-6);
}
.header h2 {
font-size: 2.25rem;
}
}
@media (min-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
.faq-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
<section class="pricing-section">
<!-- Header -->
<div class="header">
<h2>Marketing Solutions Pricing</h2>
<p>Choose the perfect plan for your marketing needs</p>
</div>
<!-- Toggle Annual/Monthly -->
<div class="toggle-container">
<div class="toggle-wrapper">
<span class="toggle-label">Monthly</span>
<button type="button" role="switch" aria-checked="true" class="toggle-button" id="pricing-toggle">
<span class="toggle-knob" id="toggle-knob"></span>
</button>
<span class="toggle-label">Annual <span class="toggle-discount">(Save 20%)</span></span>
</div>
</div>
<!-- Pricing Cards -->
<div class="pricing-grid">
<!-- Starter Plan -->
<div class="pricing-card">
<h3>Starter</h3>
<p>Perfect for small businesses starting their marketing journey</p>
<div class="price">
<span class="price-amount" data-monthly="$99" data-annual="$79">$99</span>
<span class="price-period">/month</span>
</div>
<ul class="feature-list">
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Social media management (2 platforms)
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Basic SEO optimization
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Monthly performance reports
</li>
</ul>
<button class="cta-button">Get Started</button>
</div>
<!-- Professional Plan -->
<div class="pricing-card popular">
<div class="popular-badge">Most Popular</div>
<h3>Professional</h3>
<p>Advanced features for growing businesses</p>
<div class="price">
<span class="price-amount" data-monthly="$199" data-annual="$159">$199</span>
<span class="price-period">/month</span>
</div>
<ul class="feature-list">
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Social media management (5 platforms)
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Advanced SEO optimization
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Content marketing strategy
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Weekly performance reports
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Email marketing campaigns
</li>
</ul>
<button class="cta-button">Get Started</button>
</div>
<!-- Enterprise Plan -->
<div class="pricing-card">
<h3>Enterprise</h3>
<p>Custom solutions for large organizations</p>
<div class="price">
<span class="price-amount" data-monthly="$399" data-annual="$319">$399</span>
<span class="price-period">/month</span>
</div>
<ul class="feature-list">
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Unlimited social media management
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Enterprise SEO solutions
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Custom marketing strategy
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Daily performance reports
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Dedicated account manager
</li>
</ul>
<button class="cta-button">Contact Sales</button>
</div>
</div>
<!-- FAQ Section -->
<div class="faq-section">
<h3 class="faq-header">Frequently Asked Questions</h3>
<div class="faq-grid">
<div class="faq-item">
<h4 class="faq-question">What's included in the Starter plan?</h4>
<p class="faq-answer">Our Starter plan includes essential marketing tools to help you begin your digital marketing journey, including basic social media management and SEO optimization.</p>
</div>
<div class="faq-item">
<h4 class="faq-question">Can I upgrade or downgrade my plan?</h4>
<p class="faq-answer">Yes, you can change your plan at any time. Changes will be reflected in your next billing cycle.</p>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('pricing-toggle');
const toggleKnob = document.getElementById('toggle-knob');
const prices = document.querySelectorAll('[data-monthly]');
let isAnnual = false;
toggle.addEventListener('click', function() {
isAnnual = !isAnnual;
toggle.setAttribute('aria-checked', isAnnual);
toggleKnob.style.transform = isAnnual ? 'translateX(1.25rem)' : 'translateX(0)';
prices.forEach(price => {
const monthlyPrice = price.getAttribute('data-monthly');
const annualPrice = price.getAttribute('data-annual');
price.textContent = isAnnual ? annualPrice : monthlyPrice;
});
});
});
</script>
<!--
@type: Pricing
@industry: Marketing
@style: Dark
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-16 sm:py-24">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class="text-center">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Marketing Solutions Pricing</h2>
<p class="mt-4 text-lg text-gray-300">Choose the perfect plan for your marketing needs</p>
</div>
<!-- Toggle Annual/Monthly -->
<div class="mt-12 flex justify-center">
<div class="relative flex items-center gap-4">
<span class="text-sm text-gray-300">Monthly</span>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex h-6 w-11 items-center rounded-full bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" id="pricing-toggle">
<span class="sr-only">Enable annual billing</span>
<span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1" id="toggle-knob"></span>
</button>
<span class="text-sm text-gray-300">Annual <span class="text-blue-400">(Save 20%)</span></span>
</div>
</div>
<!-- Pricing Cards -->
<div class="mt-12 grid gap-8 lg:grid-cols-3">
<!-- Starter Plan -->
<div class="flex flex-col rounded-2xl bg-gray-800 border border-gray-700 p-8 shadow-lg">
<h3 class="text-xl font-semibold text-white">Starter</h3>
<p class="mt-4 text-sm text-gray-300">Perfect for small businesses starting their marketing journey</p>
<div class="mt-6">
<span class="text-4xl font-bold text-white" data-monthly="$99" data-annual="$79">$99</span>
<span class="text-sm text-gray-300">/month</span>
</div>
<ul class="mt-8 space-y-4 flex-1">
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Social media management (2 platforms)
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Basic SEO optimization
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Monthly performance reports
</li>
</ul>
<button class="mt-8 block w-full rounded-lg bg-blue-600 px-6 py-3 text-center text-sm font-semibold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Get Started
</button>
</div>
<!-- Professional Plan -->
<div class="flex flex-col rounded-2xl bg-gray-800 border-2 border-blue-500 p-8 shadow-lg relative">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">
Most Popular
</div>
<h3 class="text-xl font-semibold text-white">Professional</h3>
<p class="mt-4 text-sm text-gray-300">Advanced features for growing businesses</p>
<div class="mt-6">
<span class="text-4xl font-bold text-white" data-monthly="$199" data-annual="$159">$199</span>
<span class="text-sm text-gray-300">/month</span>
</div>
<ul class="mt-8 space-y-4 flex-1">
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Social media management (5 platforms)
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Advanced SEO optimization
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Content marketing strategy
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Weekly performance reports
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Email marketing campaigns
</li>
</ul>
<button class="mt-8 block w-full rounded-lg bg-blue-600 px-6 py-3 text-center text-sm font-semibold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Get Started
</button>
</div>
<!-- Enterprise Plan -->
<div class="flex flex-col rounded-2xl bg-gray-800 border border-gray-700 p-8 shadow-lg">
<h3 class="text-xl font-semibold text-white">Enterprise</h3>
<p class="mt-4 text-sm text-gray-300">Custom solutions for large organizations</p>
<div class="mt-6">
<span class="text-4xl font-bold text-white" data-monthly="$399" data-annual="$319">$399</span>
<span class="text-sm text-gray-300">/month</span>
</div>
<ul class="mt-8 space-y-4 flex-1">
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Unlimited social media management
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Enterprise SEO solutions
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Custom marketing strategy
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Daily performance reports
</li>
<li class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Dedicated account manager
</li>
</ul>
<button class="mt-8 block w-full rounded-lg bg-blue-600 px-6 py-3 text-center text-sm font-semibold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Contact Sales
</button>
</div>
</div>
<!-- FAQ Section -->
<div class="mt-16">
<h3 class="text-2xl font-bold text-white text-center mb-8">Frequently Asked Questions</h3>
<div class="grid gap-6 lg:grid-cols-2">
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h4 class="text-lg font-semibold text-white mb-3">What's included in the Starter plan?</h4>
<p class="text-gray-300">Our Starter plan includes essential marketing tools to help you begin your digital marketing journey, including basic social media management and SEO optimization.</p>
</div>
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h4 class="text-lg font-semibold text-white mb-3">Can I upgrade or downgrade my plan?</h4>
<p class="text-gray-300">Yes, you can change your plan at any time. Changes will be reflected in your next billing cycle.</p>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('pricing-toggle');
const toggleKnob = document.getElementById('toggle-knob');
const prices = document.querySelectorAll('[data-monthly]');
let isAnnual = false;
toggle.addEventListener('click', function() {
isAnnual = !isAnnual;
toggle.setAttribute('aria-checked', isAnnual);
toggleKnob.classList.toggle('translate-x-6');
prices.forEach(price => {
const monthlyPrice = price.getAttribute('data-monthly');
const annualPrice = price.getAttribute('data-annual');
price.textContent = isAnnual ? annualPrice : monthlyPrice;
});
});
});
</script>
