Modern Responsive CSS Pricing Table Code (Copy & Paste)

If you are selling services, products, or subscriptions on your website, a clear and attractive pricing table is essential. A well-designed pricing table can significantly increase your conversion rates by guiding visitors to your preferred plan.

In this post, I am sharing a fully Responsive Pricing Table code snippet. It uses CSS Flexbox to ensure it looks perfect on both mobile phones and desktop screens. It features a modern design with a "Best Value" highlight effect.

Why use this Pricing Table?

Conversion Focused: The center card is slightly larger and highlighted to draw attention to your "Best Value" plan.
Fully Responsive: On desktops, it displays as a row. On mobile devices, it automatically stacks into a column.
Pure CSS: No heavy frameworks or JavaScript needed. It loads instantly.
Clean Design: Minimalist style that fits any website theme.

Live Preview

Hover over the pricing cards to see the interactive lift effect!

Basic

$19/mo

1 Website
10GB Storage
Basic Support

Best Value

Pro

$49/mo

5 Websites
50GB Storage
Priority Support
Free SSL

Premium

$99/mo

Unlimited Websites
Unlimited Storage
24/7 Support

HTML & CSS Code

Copy the code below and paste it into your blog post. It contains everything you need.

<style>
.pricing-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  font-family: sans-serif;
}

.price-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  text-align: center;
  width: 250px;
  transition: 0.3s;
  position: relative;
  border: 1px solid #eee;
}

.price-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Highlight the Popular Plan */
.price-card.popular {
  border: 2px solid #6c5ce7;
  transform: scale(1.05);
  z-index: 1;
}

.price-card.popular:hover {
  transform: scale(1.05) translateY(-10px);
}

.price-card h3 {
  color: #333;
  margin-bottom: 10px;
}

.price {
  font-size: 40px;
  color: #6c5ce7;
  font-weight: bold;
  margin-bottom: 20px;
}

.price span {
  font-size: 16px;
  color: #888;
  font-weight: normal;
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.price-card ul li {
  color: #666;
  padding: 10px 0;
  border-bottom: 1px solid #f4f4f4;
}

.price-btn {
  display: inline-block;
  background: #6c5ce7;
  color: white;
  padding: 10px 25px;
  text-decoration: none;
  border-radius: 25px;
  transition: 0.3s;
  font-weight: bold;
}

.price-btn:hover {
  background: #5b4cc4;
}

.badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fab1a0;
  color: #d35400;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .pricing-container {
    flex-direction: column;
    align-items: center;
  }
  .price-card {
    width: 100%;
    max-width: 300px;
  }
  .price-card.popular {
    transform: scale(1);
    margin: 10px 0;
  }
}
</style>

<!-- Pricing Table HTML -->
<div class="pricing-container">
    <!-- Basic -->
    <div class="price-card">
        <h3>Basic</h3>
        <div class="price">$19<span>/mo</span></div>
        <ul>
            <li>1 Website</li>
            <li>10GB Storage</li>
            <li>Basic Support</li>
        </ul>
        <a href="#" class="price-btn">Sign Up</a>
    </div>
    <!-- Pro (Best Value) -->
    <div class="price-card popular">
        <div class="badge">Best Value</div>
        <h3>Pro</h3>
        <div class="price">$49<span>/mo</span></div>
        <ul>
            <li>5 Websites</li>
            <li>50GB Storage</li>
            <li>Priority Support</li>
            <li>Free SSL</li>
        </ul>
        <a href="#" class="price-btn">Sign Up</a>
    </div>
    <!-- Premium -->
    <div class="price-card">
        <h3>Premium</h3>
        <div class="price">$99<span>/mo</span></div>
        <ul>
            <li>Unlimited Websites</li>
            <li>Unlimited Storage</li>
            <li>24/7 Support</li>
        </ul>
        <a href="#" class="price-btn">Sign Up</a>
    </div>
</div>

How to Customize

You can adjust the content and colors to fit your brand. Here is how:

1. How to Edit Plans & Features

Look at the HTML code at the bottom. You will see <li>...</li> tags. Simply replace the text inside these tags with your own features (e.g., "Free Domain", "24/7 Support").

2. How to Change Colors

The main theme color is Purple (#6c5ce7). To change it, find and replace #6c5ce7 in the CSS with your own color code.

Blue: #0984e3
Green: #00b894
Red: #d63031

3. How to Change Prices

Find the <div class="price"> section in the HTML. Change $19, $49, or $99 to your actual prices. You can also change /mo to /yr for yearly plans.

Conclusion

A good pricing table helps users make decisions faster. This responsive CSS pricing table is a perfect addition to your service page. It is lightweight, attractive, and easy to edit. Try it out and see your conversions grow!

Copy Paste Web Tips