JSFiddle - React, Tailwind, and code Playground

HTML

<table class='wrapper' width="800" cellspacing='1' cellpadding='2'>
    <tr>
        <td width="205" colspan="4" rowspan="2" align="center" class="row1">DADOS APURADOS</td>
        <td width="56" rowspan="2" align="center" class="row1">VALOR</td>
        <td rowspan="2" class="row1" align="center">DISCRIMINAÇÃO</td>
        <td colspan="2" class="row1" align="center">SEM/PROM</td>
    </tr>
    <tr>
        <td width="29" class="row2">
            <input name="sem1" type="text" id="sem1" size="1">
        </td>
        <td width="53" class="row2">
            <input name="semdt1" type="text" id="semdt1" value="<?php echo date('Y') ?>" size="3">
        </td>
    </tr>
    <tr>
        <td width="205" rowspan="7" class="row1" align="center">P
            <br />O
            <br />N
            <br />T
            <br />O
            <br />S
            <br />
            <br />
            <br />P
            <br />O
            <br />S
            <br />I
            <br />T
            <br />I
            <br />V
            <br />O
            <br />S</td>
        <td width="205" rowspan="4" align="center" class="row1">TEMPO
            <br />DE
            <br />SERVIÇO</td>
        <td colspan="2" class="row3">FUNÇÃO</td>
        <td class="row3">
            <input name="t1" type="text" disabled="disabled" id="t1" value="0.10" size="5">
        </td>
        <td width="45" class="row3">
            <input name="disc1a" type="text" id="disc1a" class="nr" size="9">
        </td>
        <td colspan="2" class="row3">
            <input name="promo1a" type="text" id="promo1a" class="soma" size="12">
        </td>
    </tr>
    <tr>
        <td colspan="2" class="row2">PERMANÊNCIA</td>
        <td class="row2">
            <input name="t2" type="text" disabled="disabled" id="t2" value="0.20" size="5">
        </td>
        <td class="row2">
            <input name="disc2a" type="text" id="disc2a" class="nr" size="9">
        </td>
        <td colspan="2"...

CSS

body {
    font-family:"Helvetica Neue", Helvetica, Arial;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #3b3b3b;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    background: #2b2b2b;
}
.wrapper {
    margin: 0 auto;
    padding: 20px;
    max-width: 800px;
}
.table {
    margin: 0 0 40px 0;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: table;
}
@media screen and (max-width: 580px) {
    .table {
        display: block;
    }
}
.row {
    display: table-row;
    background: #f6f6f6;
}
.row:nth-of-type(odd) {
    background: #e9e9e9;
}
.row.header {
    font-weight: 900;
    color: #ffffff;
    background: #ea6153;
}
.row.green {
    background: #27ae60;
}
.row.blue {
    background: #2980b9;
}
@media screen and (max-width: 580px) {
    .row {
        padding: 8px 0;
        display: block;
    }
}
.cell {
    padding: 6px 12px;
    display: table-cell;
}
@media screen and (max-width: 580px) {
    .cell {
        padding: 2px 12px;
        display: block;
    }
}
.txtdiv {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.row1 {
    font-weight: 900;
    color: #ffffff;
    background: #2980b9;
}
.row2 {
    background: #f6f6f6;
}
.row3 {
    background: #e9e9e9;
}

JavaScript

$(window).load(function () {
    // Somente numeros
    $('.nr').keyup(function () {
        var valor = this.value;
        if (valor) this.value = valor.replace(/[^0-9]+/g, '');
    });

    $("input[id^=disc]").each(function (i) {
        var index = i + 1;
        var $tValor = $("#t" + index);
        var $promo = $("#promo" + index + "a")
        $(this).on('keyup', function () {
            var quantidade = this.value;
            var valor = $tValor.val();
            var soma = 0;
            if (quantidade && valor) {
                soma = parseFloat(valor) * parseInt(quantidade);
                if (isNaN(soma)) soma = 0;
                else soma = soma.toFixed(2);
            }

            if (i== 3 && soma > 4 * valor) soma = 4 * valor;
            $promo.val(soma);
            calcula();
        });
    });
    $('#t4').change(function () {
        $('#disc4a').keyup();
    });
});

function calcula() {
    var valor = 0;
    $('.soma').each(function () {
        valor = parseFloat(this.value || 0) + valor;
    });
    $('#total1a').val(valor.toFixed(2));
}