JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<script src="http://zurb.com/playground/uploads/upload/upload/5/jquery.textchange.min.js"></script>
<div id="block_calc">
    <p id="block_calc_head">Калькулятор</p>
    <input type="text" name="block_calc_1" id="block_calc_1" value="" placeholder="введите длину            (м)"/>
    <input type="text" name="block_calc_2" id="block_calc_2" value="" placeholder="введите ширину        (м)"/>
    <input type="text" name="block_calc_3" id="block_calc_3" value="" placeholder="введите высоту          (м)"/>
    <p class="block_calc_subhead">Ваш общий объем: <b id="cn3">0</b> м<span class="squad">3</span></p>
     <input type="text" name="block_calc_4" id="block_calc_4" value="" placeholder="введите S дверей      (м)"/>
    <p id="block_calc_inf">обычно это составляет 10% <br /> от общего объема</p>
<select id="block_calc_5">
  <option>выберите тип блока</option>
  <option>Блок1</option>
  <option>Блок2</option>
</select>
    <p class="block_calc_subhead bcsh1">Вам нужно: <b id="cn1">0</b> м<span class="squad">3</span> <br /> или <b id="cn2">0</b> блоков</p>
    <div id="calc_button">
        <img src="http://resursblok.testsite.com.ua/templates/protostar/images/calc_button.png" alt="" />
    </div>
</div>
<div id="send_block">
    <div id="send_block_head_holder">
        <p>Укажите ваши данные</p>
    </div>
    <p>Ваше имя *</p>
    <input type="text" name="block_calc_name" id="block_calc_name" value=""/>
    <p>Ваш email</p>
    <input type="text" name="block_calc_email" id="block_calc_email" value=""/>  
    <p>Ваш телефон *</p>
    <input type="text" name="block_calc_phone" id="block_calc_phone" value=""/>   
    <div id="send_calc_button">
        <img src="http://resursblok.testsite.com.ua/templates/protostar/images/button_background.png" alt="" />
        <p>Отправить</p>
    </div>    
</div>
<div id="block_ty_box">
    <p id="btb1">Спасибо. Ваша заявка была отпраленна!</p>
    <div id="close_tybox_button">
        <img...

CSS

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/zjBCKJs0bE-LvM0teIV5VPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpGOb2gHztoQeulij-1lvl-8.woff) format('woff');
}

#block_calc {
    width:160px;
    min-height:480px;
    background:#efe4cf;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding:0px 20px;
}
#block_calc_head {
    padding-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'PT Serif', serif;
    margin-bottom: 5px;
}
#block_calc input {
    width: 148px;
    margin: 8px 0px;
    height: 28px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #E0E0E0;
    padding: 0px 5px;
    font-family: 'PT Serif', serif;
    outline: none;
    color:#7e7e7e;
}
.block_calc_subhead {
    font-family: 'PT Serif', serif;
    font-size: 13px;
}
.block_calc_subhead {
    font-family: 'PT Serif', serif;
    font-size: 13px;
    border-top: 1px solid #7C776E;
    border-bottom: 1px solid #7C776E;
    padding: 10px 0px;
    margin: 3px 0;
}
.bcsh1 {
    text-align:center;
}
#block_calc_5 {
    color:#7e7e7e;
    padding: 0px 10px 0px 0px;
    width: 160px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #E0E0E0;
    height: 28px;
    outline: none;
    text-indent: .01px;
    text-overflow: "";
    font-family: 'PT Serif', serif;
     margin: 8px 0px;
    background:...

JavaScript

$('#block_calc_3,#block_calc_4').bind('textchange', function (event, previousText) {
     var vsd = ($('#block_calc_1').val() * $('#block_calc_2').val() * $('#block_calc_3').val()) - $('#block_calc_4').val();
    if (vsd > 0) {
        $('#cn1,#cn3').text(vsd);
        $('#cn2').text(vsd/2);
    }
});