<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;
}Nothing to show yetType HTML, CSS or JavaScript and your page appears here.
Click any element to find its code Esc
Check this code before you run it
It came from a shared link. It runs with fewer permissions, so it cannot open pop-ups, submit forms or start downloads.
0.00s / 0.00s
Nothing has animated yet. Hover, click or type in the preview and each CSS animation, transition or
element.animate() call shows up here as it plays.