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/AVvXsEhnw_kh-lRvNX6dPxawgVJlT1GA6yxjfgMZYr5cMBOHYJ_GyzhXgPc7bCiqNK2xQcSvODtnT4mQet4RH-8g8-LLDYkrCXiidw9ruuNeGr60pW24OxwoT4HeTvjNxHoyYv-F5MZHQIiAdXs/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/AVvXsEiePnwh-b_x1dfjnLloIpN9s1QCpCj3_hnc6019DacdVL1tfbCMalFQm0Y8PF3qjBL8HRlqrK_xivUwTtKySo5BmKRhFAq512a4vBP-aT1j945l2I_v2Eyv7RcCEMqP9hS6NZ8hOhKNjRk/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/AVvXsEiGanjdZ5IAuvslNlnlLSwDh9MBVIDVPqrSwo8pqxEHbBvoAMJ97y_ew8r14aB0jmjW2BsAzd3j-TAeHPisynCHP8EwPODUzzn29Mh87r3s04Gmc6b42R2xFG8ti6_BJ_LJH9DMRR4wtdQ/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/AVvXsEhnw_kh-lRvNX6dPxawgVJlT1GA6yxjfgMZYr5cMBOHYJ_GyzhXgPc7bCiqNK2xQcSvODtnT4mQet4RH-8g8-LLDYkrCXiidw9ruuNeGr60pW24OxwoT4HeTvjNxHoyYv-F5MZHQIiAdXs/s50/basic.png' alt='Basic'/>

Be the font-awesome code 

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