JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calculator">	<span id="calculatorHeader">Monthly Payment Calculator</span>

    <table style="margin:0 auto;">
        <tr>
            <td style="width:40px;">Term
                <input id="theTerm" size="5" value="0" name="term" style="width:35px" />
            </td>
            <td style="width:40px;">Rate(%)
                <input id="theRate" size="5" value="0" name="apr" style="width:35px" />
            </td>
            <td style="width:55px;">Price($)
                <input id="thePrice" size="6" maxlength="7" name="price" style="width:50px" value="0" />
            </td>
            <td style="width:40px;">Tax(%)
                <input id="theTax" size="4" maxlength="7" name="tax" style="width:35px" value="0" />
            </td>
            <td style="width:40px;">Down($)
                <input id="theDown" size="5" maxlength="7" name="downPmt" style="width:35px" value="0" />
            </td>
            <td style="width:40px;">Trade($)
                <input id="theTrade" size="5" maxlength="7" name="trade" style="width:35px" value="0" />
            </td>
            <td style="width:78px;">Est.Monthly Pmt
                <input id="theResult" size="7" maxlength="7" name="result" style="width:75px" value="0" />
            </td>
        </tr>
    </table>
</div>

CSS

#calculator {
    display:block;
    width:360px;
    height:72px;
    margin:10px auto;
    background:#EBEBEB;
    border-radius:10px;
}
#calculator #calculatorHeader {
    display:block;
    width:100%;
    margin-top:5px;
    padding-top:5px;
    text-align:center;
    font-size:13px;
    font-weight:bold;
    color:#000000;
}
#calculator td {
    font-size:10px;
}
#calculator input {
    margin-top:5px;
    border: #CCC 1px solid;
    -moz-box-shadow: inset 0 0 4px 0 #CCC;
    -webkit-box-shadow: inset 0 0 2px 0 #000;
    box-shadow: inset 0 0 2px 0 #000;
    font-weight:bold;
    text-align:right;
}

JavaScript

$(document).ready(function () {
    $("#calculator input").keyup(function () {
        var theTerm = parseInt($("#theTerm").val(), 10);
        var theRate = parseFloat($("#theRate").val(), 10);
        var thePrice = parseInt($("#thePrice").val(), 10);
        var theTax = parseFloat($("#theTax").val(), 10);
        var theDown = parseInt($("#theDown").val(), 10);
        var theTrade = parseInt($("#theTrade").val(), 10);
        var theResult = (Math.ceil((((thePrice - theTrade - theDown) * (1 + (theTax / 100))) * (1 + (theRate / 100))) / (theTerm) * 100) / 100).toFixed(2);
        if (theResult === Infinity || theResult === "" || theResult === NaN) {
            theResult === 0;
        }
        $("#theResult").val(theResult);
    });
});