Back to Snippets

Card-Based Pricing Tables with CSS

Present your subscription options with these beautiful pricing cards. This layout uses Flexbox for alignment and features a "Popular" highlighted card with a hover lift effect, which encourages users to choose the best value plan.

266

#css

#pricing

#table

#flexbox

#cards

#subscription

#modern ui

/HTML *CSS ()JS Output Live Updates

.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;
}

<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>&#10003; 1 User</li>
      <li>&#10003; 5 Projects</li>
      <li>&#10003; 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>&#10003; 5 Users</li>
      <li>&#10003; Unlimited Projects</li>
      <li>&#10003; 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>&#10003; Unlimited Users</li>
      <li>&#10003; Advanced Analytics</li>
      <li>&#10003; 24/7 Support</li>
    </ul>
    <button class="price-btn">Contact Sales</button>
  </div>
</div>

Card-Based Pricing Tables with CSS

Share Code Snippet