Create a Pricing Plans Widget for Prices of Services or Products

/* Pricing Section by Dunia Blanter (www.idblanter.com) */
.pricing-section{font-family:'Google Sans',Arial,sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}
.pricing-section .pricing-title{font-size:1.1rem;margin:1rem 0 0;font-weight:700}
.pricing-container{display:flex;max-width:1000px;margin:0 auto}
.pricing-tag{margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px}
a.blanter-order-btn{font-size:14px;text-transform:uppercase;text-decoration:none;background:#333;color:#fff;display:inline-block;padding:7px 20px;border-radius:20px;transition:all .3s ease-in-out}
a.blanter-order-btn:hover{transform:scale(1.1)}
.pricing-blanter-column{background:#fff;padding:30px 15px;box-sizing:border-box;border-radius:10px;text-align:center;width:33%;margin:10px;box-shadow:0 7px 7px rgba(0,0,0,0.06);border:2px solid #fff;transition:all .3s ease-in-out}
.pricing-blanter-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
.pricing-blanter-column img{width:50px}
.pricing-section i{font-size:3rem}
.blanter-price{font-weight:700;font-size:22px}
.service-info{opacity:.7}
.blanter-2-column .pricing-blanter-column{width:50%}
.pricing-blanter-column:nth-child(1) .blanter-price,.pricing-blanter-column:nth-child(1) i{color:#f87200} /* Change Color Code */
.pricing-blanter-column:nth-child(2) .blanter-price,.pricing-blanter-column:nth-child(2) i{color:#ff5483} /* Change Color Code */
.pricing-blanter-column:nth-child(3) .blanter-price,.pricing-blanter-column:nth-child(3) i{color:#2b73f6} /* Change Color Code */
.pricing-blanter-column:nth-child(1):hover{border-color:#f87200} /* Change Color Code */
.pricing-blanter-column:nth-child(2):hover{border-color:#ff5483} /* Change Color Code */
.pricing-blanter-column:nth-child(3):hover{border-color:#2b73f6} /* Change Color Code */
.pricing-blanter-column:nth-child(1) .pricing-tag,.pricing-blanter-column:nth-child(1) a.blanter-order-btn{background:#f87200} /* Change Color Code */
.pricing-blanter-column:nth-child(2) .pricing-tag,.pricing-blanter-column:nth-child(2) a.blanter-order-btn{background:#ff5483} /* Change Color Code */
.pricing-blanter-column:nth-child(3) .pricing-tag,.pricing-blanter-column:nth-child(3) a.blanter-order-btn{background:#2b73f6} /* Change Color Code */
@media screen and (max-width:580px){
.pricing-blanter-column,.blanter-2-column .pricing-blanter-column{width:auto}
.pricing-container{display:block}
}

<div class="pricing-section">
<div class="pricing-container">
    <div class="pricing-blanter-column">
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdmyYIWZaJHBkBdyhX9eRVNwl7RuUYL__-0kIDvEQy9d5hQWCK7AoV0sMJ6XvsvLiHeRanTX713yoFXDO3fe8Qxtc46FZJcoZaIHT5svHdUv3Zs6KB3Yurekblc3LVIAyyu4__vk4NkSg/s50/basic.png' alt='Basic'/>
        <div class="pricing-title">Basic</div>
        <div class="pricing-tag">20% off</div>
        <div class="blanter-price">Rp 150.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>1 License</li>
        <li>Full Optimization</li>
        <li>1 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoqoqWwpejOHPeEnDwCEKTu4DfWI-ZZWI3gK_Ev31Ov-MYMQ_9K7lqHpE3PG_aGvQmcXxykhbkpTrN5xU6QhUPkk1Z2-P1hgpLALpRgAbWW6NA_jxjIyg5iudFWVbGZxy1HxBS5D1pu1g/s50/personal.png' alt='Personal'/>
        <div class="pricing-title">Personal</div>
        <div class="pricing-tag">Best Value</div>
        <div class="blanter-price">Rp 220.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>3 License</li>
        <li>Full Optimization</li>
        <li>3 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZb7GbG_6OyyoPFMAlJSl3wNR_nOKG7xlDLuds2DVOKa4iUedFgNz48pvd930iXMNYzS4bp_ScgQ0xYW8vt_pZKHMhKKM8BnupuQ9a0CqDzmh8o_47oeRz6QfFJjzLthpqy30ytggW50c/s50/developer.png' alt='Developer'/>
        <div class="pricing-title">Developer</div>
        <div class="pricing-tag">For Business</div>
        <div class="blanter-price">Rp 999.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>Unlimited License</li>
        <li>Full Optimization</li>
        <li>6 Month Full Support</li>
        <li>Easy Customize</li>
        <li>1 Bonus Template</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
    </div>
</div>
</div>

image will be changed via the font-awesome

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdmyYIWZaJHBkBdyhX9eRVNwl7RuUYL__-0kIDvEQy9d5hQWCK7AoV0sMJ6XvsvLiHeRanTX713yoFXDO3fe8Qxtc46FZJcoZaIHT5svHdUv3Zs6KB3Yurekblc3LVIAyyu4__vk4NkSg/s50/basic.png' alt='Basic'/>

Be the font-awesome code 

<i class='fas fa-home'></i>