<div class="pricing-wrapper">
<div class="price-card">
<div class="price-header">
<h3>Starter</h3>
<div class="price-value">$0<span>/mo</span></div>
</div>
<ul class="price-features">
<li>✓ 1 User</li>
<li>✓ 5 Projects</li>
<li>✓ Community Support</li>
</ul>
<button class="price-btn">Get Started</button>
</div>
<div class="price-card popular">
<span class="badge">Best Value</span>
<div class="price-header">
<h3>Pro</h3>
<div class="price-value">$29<span>/mo</span></div>
</div>
<ul class="price-features">
<li>✓ 5 Users</li>
<li>✓ Unlimited Projects</li>
<li>✓ Priority Support</li>
</ul>
<button class="price-btn primary">Get Started</button>
</div>
<div class="price-card">
<div class="price-header">
<h3>Enterprise</h3>
<div class="price-value">$99<span>/mo</span></div>
</div>
<ul class="price-features">
<li>✓ Unlimited Users</li>
<li>✓ Advanced Analytics</li>
<li>✓ 24/7 Support</li>
</ul>
<button class="price-btn">Contact Sales</button>
</div>
</div>
.pricing-wrapper {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
padding: 40px 20px;
}
.price-card {
background: #fff;
border-radius: 24px;
padding: 40px 30px;
width: 300px;
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #f3f4f6;
}
.price-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
.price-card.popular {
border: 2px solid #3b82f6;
background: linear-gradient(to bottom, #ffffff, #f0f9ff);
}
.badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #3b82f6;
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
}
.price-header h3 {
font-size: 1.2rem;
color: #6b7280;
margin: 0 0 10px 0;
}
.price-value {
font-size: 3rem;
font-weight: 800;
color: #111827;
}
.price-value span {
font-size: 1rem;
color: #9ca3af;
font-weight: 400;
}
.price-features {
list-style: none;
padding: 0;
margin: 30px 0;
color: #4b5563;
line-height: 2.2;
}
.price-btn {
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
background: #f3f4f6;
color: #1f2937;
font-weight: 700;
cursor: pointer;
transition: background 0.2s;
}
.price-btn.primary {
background: #3b82f6;
color: white;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.price-btn:hover {
opacity: 0.9;
}