JSFiddle - React, Tailwind, and code Playground

HTML

<body onLoad="initialize()">    
<form name="form">
        <table class="border" cellspacing="0" cellpadding="3">
            <tr>
                <td class="tableheader cellcolor topleft">Reel Size</td>
                <td class="tableheader cellcolor topright"># of Reels</td>
            </tr>
            <tr>
                <td class="regreelfont">3" Regular8 (50 ft)</font>
                </td>
                <td class="cellcolor">
                    <input type="text" name="regthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="regreelfont">4" Regular8 (100 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="regfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="regreelfont">5" Regular8 (200 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="regfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="regreelfont">6" Regular8 (300 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="regsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="regreelfont">7" Regular8 (400 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="regseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
                <tr></tr>
            ...

CSS

.tableheader {
            font-weight: bold;
            font-size: 20px;
            font-family: calibri;
            text-align: center;
        }
        .regreelfont {
            font-size: 15px;
            font-family: calibri;
            text-align: right;
            background-color: #96C6FF;
        }
        .supreelfont {
            font-size: 15px;
            font-family: calibri;
            text-align: right;
            background-color: #7CB8FF;
        }
        .sixreelfont {
            font-size: 15px;
            font-family: calibri;
            text-align: right;
            background-color: #55A1FE;
        }
        .bottomfonts {
            font-family: calibri;
            font-size: 16px;
            font-weight: 900;
        }
        .cellcolor {
            text-align: center;
            background-color: #D2E7FF;
        }
        .cellcolor2 {
            text-align: left;
            background-color: #D2E7FF;
        }
        .rightside {
            background-color: #D2E7FF;
            text-align: right;
        }
        .border {
            border-width: 10px;
            border-radius: 20px;
            border-style: solid;
            border-color: #CBCBCB;
        }
        .leftside {
            text-align: left;
        }
        .bottwo {
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .addons {
            font-family: Lucida Console;
            font-size:11px;
            font-weight;
            bold;
        }
        .topleft {
            border-top-left-radius: 10px;
        }
        .topright {
            border-top-right-radius: 10px;
        }
        .orange {
            color: #fef4e9;
            border: solid 1px ##197BFB;
            border-radius: 10px;
            background: #f78d1d;
            background: -webkit-gradient(linear, left top, left bottom, from(#197BFB), to(#4A5C75));
            background:...

JavaScript

function initialize() {
    Total = 0;
    totaltest.innerText = Total;
}

function checkoptionone(checkbox) {
    checknum = parseFloat(checkbox.value);
    if (checkbox.checked == true) {
        Total += checknum;
    }
    else {
        Total -= checknum;
    }
    totaltest.innerText = Total;
}

function calculate() {

    var type;

    price = parseFloat(0.20);

    regthree = parseFloat(document.form.regthree.value);
    if (isNaN(regthree)) {
        regthree = 0;
    }
    regfour = parseFloat(document.form.regfour.value);
    if (isNaN(regfour)) {
        regfour = 0;
    }
    regfive = parseFloat(document.form.regfive.value);
    if (isNaN(regfive)) {
        regfive = 0;
    }
    regsix = parseFloat(document.form.regsix.value);
    if (isNaN(regsix)) {
        regsix = 0;
    }
    regseven = parseFloat(document.form.regseven.value);
    if (isNaN(regseven)) {
        regseven = 0;
    }
    supthree = parseFloat(document.form.supthree.value);
    if (isNaN(supthree)) {
        supthree = 0;
    }
    supfour = parseFloat(document.form.supfour.value);
    if (isNaN(supfour)) {
        supfour = 0;
    }
    supfive = parseFloat(document.form.supfive.value);
    if (isNaN(supfive)) {
        supfive = 0;
    }
    supsix = parseFloat(document.form.supsix.value);
    if (isNaN(supsix)) {
        supsix = 0;
    }
    supseven = parseFloat(document.form.supseven.value);
    if (isNaN(supseven)) {
        supseven = 0;
    }
    sixthree = parseFloat(document.form.sixthree.value);
    if (isNaN(sixthree)) {
        sixthree = 0;
    }
    sixfour = parseFloat(document.form.sixfour.value);
    if (isNaN(sixfour)) {
        sixfour = 0;
    }
    sixfive = parseFloat(document.form.sixfive.value);
    if (isNaN(sixfive)) {
        sixfive = 0;
    }
    sixsix = parseFloat(document.form.sixsix.value);
    if (isNaN(sixsix)) {
        sixsix = 0;
    }
    sixseven = parseFloat(document.form.sixseven.value);
    if (isNaN(sixseven)) {
        sixseven =...