How to create a Pricing Plan Component

Florin Pop
Feb 26 · 5 min read
Live on Codepen - https://codepen.io/FlorinPop17/full/WmNoJx

The HTML

<div class="pricing-box-container"> 
<div class="pricing-box text-center"></div>
<div class="pricing-box pricing-box-bg-image text-center"></div>
<div class="pricing-box text-center"></div>
</div>
<div class="pricing-box text-center"> 
<h5>Free</h5>
<p class="price"><sup>$</sup>0<sub>/mo</sub></p>
<ul class="features-list">
<li><strong>1</strong> Project</li>
<li><strong>5</strong> Team Members</li>
<li><strong>50</strong> Personal Projects</li>
<li><strong>5,000</strong> Messages</li>
</ul>
<button class="btn-primary">Get Started</button>
</div>

The CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); * { box-sizing: border-box; } body { 
background-color: #f6f5f7;
font-family: 'Open Sans', sans-serif;
margin-bottom: 50px;
}
.text-center { text-align: center; }
.pricing-box-container { 
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pricing-box { 
background-color: #ffffff;
box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.5);
border-radius: 4px;
flex: 1;
padding: 0 30px 30px;
margin: 2%;
min-width: 250px;
max-width: 350px;
}
.pricing-box h5 { text-transform: uppercase; } .price { 
margin: 24px 0;
font-size: 36px;
font-weight: 900;
}
.price sub, .price sup {
font-size: 16px;
font-weight: 100;
}
.features-list {
padding: 0;
list-style-type: none;
}
.features-list li {
font-weight: 100;
padding: 12px 0;
font-weight: 100;
}
.features-list li:not(:last-of-type) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.btn-primary {
border-radius: 25px;
border: none;
background-color: #ec1362;
color: #ffffff;
cursor: pointer;
padding: 10px 15px;
margin-top: 20px;
text-transform: uppercase;
transition: all 0.1s ease-in-out;
}
.btn-primary:hover {
box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.5);
transform: translateY(-3px);
}
.pricing-box-bg-image { 
background-image: url('https://images.unsplash.com/photo-1550029402-226115b7c579?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80');
background-size: cover;
background-position: center center;
color: #ffffff;
}
.pricing-box-bg-image .features-list li {
border-bottom-color: rgba(255, 255, 255, 1);
}
.pricing-box-bg-image .btn-primary {
background-color: #ffffff;
color: #000;
}

Conclusion


Chingu

Join our friendly community's mission to create a collaboration & opportunity hub for tech-learners! Developers | Designers | Data Scientists

Florin Pop

Written by

JavaScript enthusiast 🙌, Front-end developer 💻 & Blogger at https://florin-pop.com/blog/

Chingu

Chingu

Join our friendly community's mission to create a collaboration & opportunity hub for tech-learners! Developers | Designers | Data Scientists