JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
    <div id="form">
        <div id="intro-txt">Enter your stats below.</div>
        Attack: <input type="text" name="power" value="1000"><br><br>
        Critical Rate (%): <input type="text" name="critrate" value="50"><br>
        or (If Critical Rate = 0)<br>
        Precision: <input type="text" name="precision" value="0"><br><br>
        Critical Damage (%): <input type="text" name="critdmg" value="25"><br>
        or (If Critical Damage = 0)<br>
        Ferocity <input type="text" name="ferocity" value="0"><br><br>
        +Damage Enchancer (%): <input type="text" name="dmgenc" value="0">
        <div id="results-txt">Results:</div>
        <div id="foot-note">(Automatically updates. The higher, the better.)</div>
        <div id="results">Please enable javascript.</div>
    </div>
</body>

CSS

/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

html, body {
    font: 16px Courier, Arial, sans-serif;
    text-align: center;
}

#intro-txt {
    font-size: 18px;
    margin-bottom: 25px;
    font-style: italic;
}

#form {
    margin: 10px auto;
    width: 500px;
    border-radius: 2px;
    background-color: #F7F7F7;
    border: 1px solid #444444;
    box-shadow: 1px 2px 2px #aaaaaa;
    padding: 10px;
}

#form input {
    padding: 3px 6px;
    box-shadow: 1px 1px 1px #888888;
    border: 1px solid #444444;
}

#results {
    width: 450px;
    border: 1px dashed #888888;
    padding: 10px;
    margin: 0 15px;
}

#results-txt {
    font-size: 20px;
    margin: 25px 15px 5px;
}

#foot-note {
    margin: 5px 15px;
    font-size: 14px;
    font-style: italic;
}

JavaScript

(function($) {
    var dataVals = {
        power: 1000,
        critrate: 50,
        precision: 0,
        ferocity: 0,
        critdmg: 25,
        dmgenc: 0
    };
    
    var updateResults = function() {
        
        var critRate = dataVals.critrate === 0 ? Math.floor(dataVals.precision / 21) / 100 : dataVals.critrate / 100;
        var critDmg = dataVals.critdmg === 0 ? Math.floor(dataVals.ferocity / 15) / 100 : dataVals.critdmg / 100;
        var power = dataVals.power;
        var dmgEnc = dataVals.dmgenc / 100;
        
        var onCrit = (power * (1.5 + critDmg) * (1 + dmgEnc)).toFixed(3);
        var noCrit = (power * (1 + dmgEnc)).toFixed(3);
        var average = (((power * (1 - critRate)) + (power * critRate * (1.5 + critDmg))) * (1 + dmgEnc)).toFixed(3);
        
        var result = 'Crit: ' + onCrit + '<br>'
            + 'No Crit: ' + noCrit + '<br>'
            + 'Average: ' + average;
        $('#results').html(result);
    };
    updateResults();
    
    $('input').keyup(function() {
        var name = $(this).attr('name');
        console.log(name);
        if (dataVals.hasOwnProperty(name)) {
            var val = $(this).val();
            dataVals[name] = parseInt(val);
            if (dataVals[name] != val) {
                $('#results').html('Invalid input - must be number.');
            } else {
                updateResults();
            }
        }
    });
}(jQuery));