JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<script src="http://rlexpert.ru/templates/real/javascript/main.js"></script>
<div id="iz_calc" class="window">
    <div id="iz_calc_block">
        <p id="iz_head">Калькулятор износа</p>
        <div class="iz_input_holder">
            <p>Тип машины*</p>
            <select id="iz_select">
                <option id="iz_s1" value="iz_s1" data-delt="0.055" data-dell="0.0028">Российский Легковой Автомобиль</option>
                <option id="iz_s2" value="iz_s2" data-delt="0.08" data-dell="0.0024">Российский Грузовой Автомобиль</option>
                <option id="iz_s3" value="iz_s3" data-delt="0.072" data-dell="0.0016">Российский Тягач</option>
                <option id="iz_s4" value="iz_s4" data-delt="0.12" data-dell="0.002">Российский Самосвал</option>
                <option id="iz_s5" value="iz_s5" data-delt="0.11" data-dell="0.0016">Российский Спец. Автомобиль</option>
                <option id="iz_s6" value="iz_s6" data-delt="0.112" data-dell="0.0008">Российский Автобус</option>
                <option id="iz_s7" value="iz_s7" data-delt="0.04" data-dell="0.002">Собранный в Европе Легковой Автомобиль</option>
                <option id="iz_s8" value="iz_s8" data-delt="0.044" data-dell="0.0024">Собранный в Америке Легковой Автомобиль</option>
                <option id="iz_s9" value="iz_s9" data-delt="0.05" data-dell="0.0026">Собранный в Азии (кроме Японии) Легковой Автомобиль</option>
                <option id="iz_s10" value="iz_s10" data-delt="0.036" data-dell="0.0016">Собранный в Японии Автомобиль</option>
                <option id="iz_s11" value="iz_s11" data-delt="0.072" data-dell="0.0017">Иностранный Грузовой Автомобиль</option>
                <option id="iz_s12" value="iz_s12" data-delt="0.096" data-dell="0.0008">Иностранный Автобус</option>
            </select>
        </div>
        <div class="iz_input_holder">
            <p>Год выпуска*</p>
            <input...

CSS

#iz_calc {
    width:760px;
    height:675px;
    background: #FAFAFA;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 15px 40px;
    position: absolute;
    top: 50px;
    overflow:hidden;
    display:none;
}
#iz_calc_block {
    width:380px;
    padding-right: 40px;
    position:relative;
}
#iz_info_block {
    width:330px;
}
#iz_separate {
    width: 1px;
    height: 100%;
background: -moz-radial-gradient(center, ellipse cover, rgba(170,170,170,1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(170,170,170,1)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(170,170,170,1) 0%,rgba(0,0,0,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(170,170,170,1) 0%,rgba(0,0,0,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(170,170,170,1) 0%,rgba(0,0,0,0) 100%);
background: radial-gradient(ellipse at center, rgba(170,170,170,1) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#00000000',GradientType=1 );
}
#iz_calc_block,#iz_separate,#iz_info_block {
    display:inline-block;
    vertical-align:top;
}
#iz_info_block p {
    color:#727272;
    margin-left:20px;
    margin-bottom:20px;
}

#iz_hide {
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px dashed #1C96D3;
    color: #1C96D3 !important;
    float: right;
    right: 20px;
    cursor:pointer;
}
#iz_head {
    text-align: center;
    font-size: 23px;  
    margin-bottom:30px;
}
.iz_input_holder {
    margin:10px 0px;
}
.iz_input_holder p,.iz_input_holder input {
    display:inline-block;
}
.iz_input_holder p {
    width:170px;
    vertical-align:middle;
    color:#727272;
}
.iz_input_holder input {
    width:204px;
    height: 30px;
}
#iz_run {
    background: #00A3CC;
    -webkit-border-radius: 5px;
   ...

JavaScript

if (window.location.hash == '#iz_calc') {
    $('#shadow_box').show('fade', 500);
	$('#iz_calc').show('fade', 300);
	scroll_to_elem('shadow_box',500);
}
$("#iz_run").click(function () {
    if (if_valid() == true) {
    $("#iz_bad_valid").hide("fade",300);
    var cons,delt,dell;
    
    var date = new Date();
    var now_year = date.getFullYear();
    var val_year = now_year - parseInt($("#iz_year").val());
    var val_millage = parseInt($("#iz_milage").val());
    
    // Износ кузова
    var val_garatee = parseInt($("#iz_guarantee").val());
    
    var val1_pre = Math.exp(-((4*val_year)/(20+(4*val_garatee))));
    
    var val1 = 100 * (1 - val1_pre);
    animate_bar("#izb1",val1);
   //
   // Износ комлектующих
    var delt = $(("#" + $("#iz_select").val())).data("delt");
    var dell = $(("#" + $("#iz_select").val())).data("dell");
    var val_old_cof = delt*val_year;
    var val_mil_cof = (dell*0.001)*val_millage;
    var val2_pre = Math.exp(-(val_old_cof + val_mil_cof));
    var val2 = 100 * (1 - val2_pre);
    animate_bar("#izb2",val2);
   //
   // Износ Пластика
    var val3_pre = Math.exp(-(0.1*val_year));
    var val3 = 100 * (1 - val3_pre);
    animate_bar("#izb3",val3);
   //
   // Износ Батарей
    var val_acc_old = parseInt($("#iz_old_battery").val());
    if ((val_millage/val_year) >= 40000) {
        var val_max_battery_old = 3;
    }
    else {
        var val_max_battery_old = 4;
    }
    var val4 = 100*(val_acc_old/val_max_battery_old);
    animate_bar("#izb4",val4);
   //
    // Износ Шин
    var val_normal_height = 10;
    var val_min_height = 1.6;
    var now_height = parseInt($("#iz_bus").val());
    var val5 = ((val_normal_height - now_height)/(val_normal_height - val_min_height)*100);
     animate_bar("#izb5",val5);
    //
    $("#izbp1").text(parseInt(val1)+"%");
    $("#izbp2").text(parseInt(val2)+"%");
    $("#izbp3").text(parseInt(val3)+"%");
    $("#izbp4").text(parseInt(val4)+"%");
    $("#izbp5").text(parseInt(val5)+"%");
   ...