JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container topBlock invalid">
    <label style="display:block;" class="price-block">
        <div class="col-md-3  col-md-offset-1 col-sm-4">
            <div class="pricing ">
                <div class="pricing-head ">
                    <h3 class="price-back-green">BASIC</h3>
                    <h4 class="color-green"><i>€</i>29<i>.00</i><span>Per Month</span></h4></div>
                <ul class="pricing-content list-unstyled">
                    <li><i class="fa fa-inbox color-green"></i> 1 Catalogues</li>
                    <li><i class="fa fa-globe color-green"></i> 1000 Products</li>
                    <li><i class="fa fa-cogs color-green"></i> Online administration</li>
                    <li><i class="fa fa-envelope color-green"></i> E-mail support</li>
                    <li><i class="fa fa-phone color-green"></i> No Phone support</li>
                </ul>
                <div class="pricing-footer">
                    <label>Select</label>
                    <label class="radio state-success">
                        <input type="radio" name="price_plan" value="1" class="valid"><i class="check_x"></i>
                    </label>
                </div>
            </div>
        </div>
    </label>
    <label style="display:block;" class="price-block">
        <div class="col-md-3   col-sm-4">
            <div class="pricing ">
                <div class="pricing-head ">
                    <h3 class="price-back-orange">PRO</h3>
                    <h4 class="color-orange"><i>€</i>99<i>.00</i><span>Per Month</span></h4></div>
                <ul class="pricing-content list-unstyled">
                    <li><i class="fa fa-inbox color-orange"></i> 6 Catalogues</li>
                    <li><i class="fa fa-globe color-orange"></i> 10000 Products</li>
                    <li><i class="fa fa-cogs color-orange"></i> Online...

CSS

/*Pricing Page
------------------------------------*/

/*Pricing Head*/
 .no-space-pricing[class^="col-"], .no-space-pricing[class*=" col-"] {
    padding: 0;
}
.pricing {
    position:relative;
    border-radius:3px;
    margin-bottom:15px;
    box-shadow:0 0 5px #eee;
}
.pricing:hover h4 {
    color:#74C52C;
}
.pricing-head {
    text-align:center;
}
.pricing h3, .pricing h4 {
    margin:0;
    line-height:normal;
    font-weight:bold !important;
}
.pricing p {
    padding-top: 10px;
    font-size: 11px;
}
.pricing-head h3 span, .pricing-head h4 span {
    display:block;
    margin-top:5px;
    font-size:12px;
    font-style:italic;
}
.pricing-head h3 {
    color:#fafafa;
    padding:12px 0;
    font-size:35px;
    font-family:Arial;
    background:#74C52C;
    border-radius:3px 3px 0 0;
    text-shadow:0 1px 0 #32a20f;
}
.pricing-head h4 {
    color: #888;
    padding:5px 0;
    font-size:70px;
    text-shadow:0 1px 0 #fff;
    border-bottom:solid 1px #f5f9e7;
}
.pricing-head h4 i {
    top:-8px;
    font-size:28px;
    font-style:normal;
    position:relative;
}
.pricing-head h4 span {
    top:-10px;
    font-size:14px;
    font-style:normal;
    position:relative;
}
/*Pricing Content*/
 .pricing-content {
    margin-bottom: 0px;
}
.pricing-content li {
    color:#888;
    font-size:12px;
    padding:7px 15px;
    border-bottom:solid 1px #f5f9e7;
}
.pricing-content li i {
    color:#72c02c;
    font-size:16px;
    margin-right:5px;
    position:relative;
}
/*Pricing Footer*/
 .pricing-footer {
    color:#777;
    font-size:11px;
    line-height:17px;
    text-align:center;
    padding:0 20px 19px;
    border-radius:0 0 3px 3px;
}
/*Pricing Active*/
 .price-active h4 {
    color:#74C52C;
}
/*Pricing Extra*/
 .bg-color {
    background-color: #f9f9f9;
}
.no-space-pricing {
    padding: 0 15px;
    overflow: hidden;
}
.sticker-right, .sticker-left {
    color: #fff;
    width: 150px;
    padding: 5px;
    font-size: 13px;
    font-weight: bold;
    font-family:...

JavaScript

function nameValidate(field) {
        //name
        var validName = false;
        var nameVal = $('.name[name="'+field+'"]').val();
        if (nameVal) {
            $('.name[name="'+field+'"]').parent().removeClass('invalid').addClass('valid');
            validName = true;
        }
        else {
            $('.name[name="'+field+'"]').parent().removeClass('valid').addClass('invalid');
            validName = false;
        }
        return validName;
    }
    function emailValidate() {
        //email
        var validEmail = false;
        var emailVal = $('#email').val();
        var regEmail = /(\w+@[a-z_]+\.[a-z]{2,6})/i;
        var resultEmail = emailVal.match(regEmail);
        if (resultEmail) {
            $('#email').parent().removeClass('invalid').addClass('valid');
            validEmail = true;
        }
        else {
            $('#email').parent().removeClass('valid').addClass('invalid');
            validEmail = false;
        }
        return validEmail;
    }
    function passValidate() {
        //password
        var valid = false;
        var passwordVal = $('#password').val();
        var regPassword = /\w{6,}/;
        var resultPassword = passwordVal.match(regPassword);
        if (resultPassword) {
            $('#password').parent().removeClass('invalid').addClass('valid');
            valid = true;
        }
        else if (passwordVal == '') {
            $('#password').parent().removeClass('valid').addClass('invalid');
            $('.errorPass').text('Fill the field');
            valid = false;
        }
        else {
            $('#password').parent().removeClass('valid').addClass('invalid');
            valid = false;
        }
        return valid;
    }
    function confirmPassValidate() {
        //confirmPassword
        var validPass = false;
        var passwordVal = $('#password').val();
        var confirmPassVal = $('#confirmPass').val();
        if (passwordVal == '') {
           ...