Professional Web Templates

HTML

<div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="pricingTable">
                <div class="pricingTable-header">
                    <h3 class="title">Standard</h3>
                </div>
                <div class="price-value">
                    <span class="amount">$9.99</span>
                    <span class="duration">/month</span>
                </div>
                <ul class="pricing-content">
                    <li>50GB Disk Space</li>
                    <li>50 Email Accounts</li>
                    <li>50GB Bandwidth</li>
                    <li class="disable">Maintenance</li>
                    <li class="disable">15 Subdomains</li>
                </ul>
                <div class="pricingTable-signup">
                    <a href="#">Sign Up</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="pricingTable purple">
                <div class="pricingTable-header">
                    <h3 class="title">Business</h3>
                </div>
                <div class="price-value">
                    <span class="amount">$19.99</span>
                    <span class="duration">/month</span>
                </div>
                <ul class="pricing-content">
                    <li>50GB Disk Space</li>
                    <li>50 Email Accounts</li>
                    <li>50GB Bandwidth</li>
                    <li>Maintenance</li>
                    <li class="disable">15 Subdomains</li>
                </ul>
                <div class="pricingTable-signup">
                    <a href="#">Sign Up</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="pricingTable green">
                <div class="pricingTable-header">
                    <h3 class="title">Premium</h3>
                </div>
                <div class="price-value">
                    <span class="amount">$29.99</span>
                    <span class="duration">/month</span>
                </div>
                <ul class="pricing-content">
                    <li>50GB Disk Space</li>
                    <li>50 Email Accounts</li>
                    <li>50GB Bandwidth</li>
                    <li>Maintenance</li>
                    <li>15 Subdomains</li>
                </ul>
                <div class="pricingTable-signup">
                    <a href="#">Sign Up</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
:root{ --main-color: #5B46EC; }
body{ background-color: #eee; padding:20px;}

.pricingTable{
    color: #fff;
    background: #060d2a;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    padding: 30px 20px 20px;
    border-radius: 30px;
    border-top: 25px solid #DC402D;
}
.pricingTable .title{
    font-size: 27px;
    font-weight: 400;
    line-height: 33px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 5px;
}
.pricingTable .price-value{
    color: #fff;
    padding: 14px 0 17px;
    margin: 0 0 20px;
    border-top: 2px solid rgba(255,255,255,0.7);
    border-bottom: 2px solid rgba(255,255,255,0.7);
}
.pricingTable .price-value .amount{
    font-size: 53px;
    font-weight: 300;
    line-height: 53px;
    display: inline-block;
}
.pricingTable .price-value .duration{
    font-size: 22px;
    display: inline-block;
}
.pricingTable .pricing-content{
    text-align: left;
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
}
.pricingTable .pricing-content li{
    font-size: 17px;
    line-height: 40px;
    text-transform: capitalize;
    padding: 0 35px 0 0;
    margin: 0 0 5px;
    position: relative;
}
.pricingTable .pricing-content li.disable{ color: rgba(255,255,255,0.7); }
.pricingTable .pricing-content li:last-child{ margin-bottom: 0; }
.pricingTable .pricing-content li:before{
    content: "\f00c"; 
    color: #62db34;
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    top: 0;
    right: 5px;
}
.pricingTable .pricing-content li.disable:before{
    content: "\f00d";
    color: #bc2e3e;
}
.pricingTable .pricingTable-signup a{
    color:#060d2a;
    background:#DC402D;
    font-size: 25px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 5px 15px;
    border-radius: 50px;
    display: block;
text-decoration: none;
    transition: all 0.3s;
}
.pricingTable .pricingTable-signup a:hover{
    color: #fff;
    text-decoration: none;
    text-shadow: 3px -3px 3px rgba(6, 13, 42, 0.5);
}
.pricingTable.purple{ border-color: #9A35D7; }
.pricingTable.purple .pricingTable-signup a{ background: #9A35D7; }
.pricingTable.green{ border-color: #46ce10; }
.pricingTable.green .pricingTable-signup a{ background: #46ce10; }
@media only screen and (max-width: 990px){
    .pricingTable{ margin: 0 0 40px; }
}

HTML

CSS

JS

Output