JSFiddle - React, Tailwind, and code Playground

HTML

<div id='mainWrap'>
    <div id='output'>
        <div id='outputInner'>
            <div id='displayInput'></div>
            <div id='displayOutput'>
                <div>the generated command is:</div>
                <div id="commandText"></div>
            </div>
        </div>
    </div>
    <div id='input'>
        <div class="m3_inputInnerLeft inputMode3_display">
            <input type="text" id="m3_prefix" class="prefixInput inputBox inputMode3"></input>
            <input type="text" id="m3_x0" class="posInput inputBox inputMode3"></input>
            <input type="text" id="m3_y0" class="posInput inputBox inputMode3"></input>
            <input type="text" id="m3_z0" class="posInput inputBox inputMode3"></input>
            <input type="text" id="m3_x1" class="posInput inputBox inputMode3"></input>
            <input type="text" id="m3_y1" class="posInput inputBox inputMode3"></input>
            <input type="text" id="m3_z1" class="posInput inputBox inputMode3"></input>
            <input type="text" id="m3_space" class="spaceInput inputBox inputMode3"></input>
        </div>
        <div class="m3_inputInnerMid inputMode3_display">
            <input type="text" id="m3_suffix" class="suffixInput inputBox inputMode3"></input>
        </div>
        <div class="m2_inputInnerLeft inputMode2_display">
            <input type="text" id="m2_x0" class="posInput inputBox inputMode2"></input>
            <input type="text" id="m2_y0" class="posInput inputBox inputMode2"></input>
            <input type="text" id="m2_z0" class="posInput inputBox inputMode2"></input>
            <input type="text" id="m2_x1" class="posInput inputBox inputMode2"></input>
            <input type="text" id="m2_y1" class="posInput inputBox inputMode2"></input>
            <input type="text" id="m2_z1" class="posInput inputBox inputMode2"></input>
            <input type="text" id="m2_id" class="idMetaInput inputBox inputMode2"></input>
            <input type="text" id="m2_meta"...

CSS

#mainWrap {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    background: gray;
    overflow:hidden;
}
#commandText {
    overflow:hidden;
}
#generatedCode {
    width:100%;
    height:100%;
    word-break: word;
    overflow-x:hidden;
    overflow-y:auto;
}
#input {
    height:24px;
    background:white;
    width:100%;
    position:absolute;
    bottom:0px;
}
.m0_inputInnerLeft {
    height:100%;
    width:220px;
    position:absolute;
    left:0;
    top:0;
}
.m0_inputInnerMid {
    height:100%;
    width:100%;
    padding-left:205px;
    padding-right:190px;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
    float:left;
}
.m1_inputInnerLeftMid {
    height:100%;
    width:100%;
    padding-left:0px;
    padding-right:190px;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
    position:absolute;
    float:left;
}
.m2_inputInnerLeft {
    height:100%;
    width:340px;
    position:absolute;
    left:0;
    top:0;
}
.m2_inputInnerMid {
    height:100%;
    width:100%;
    padding-left:340px;
    padding-right:190px;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
    float:left;
}
.m3_inputInnerLeft {
    height:100%;
    width:425px;
    position:absolute;
    left:0;
    top:0;
}
.m3_inputInnerMid {
    height:100%;
    width:100%;
    padding-left:425px;
    padding-right:190px;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
    float:left;
}
.inputInnerright {
   ...

JavaScript

//field
var currentInputMode = 0;
var inputModeCount = 4;
var inputBoxInfo = [];

inputBoxInfo[0] = [];
inputBoxInfo[0].modeClass = ["inputMode0_display"];
inputBoxInfo[0].textClass = ["inputMode0"];
inputBoxInfo[0].inputBoxIdList = ["m0_x", "m0_y", "m0_z", "m0_id", "m0_meta", "m0_nbtTag"];
inputBoxInfo[0].inputBoxDisplayDefault = {
    m0_x: "X",
    m0_y: "Y",
    m0_z: "Z",
    m0_id: "id",
    m0_meta: "meta",
    m0_nbtTag: "NbtTag"
};
inputBoxInfo[0].isInputBoxEnabled = {
    m0_x: false,
    m0_y: false,
    m0_z: false,
    m0_id: false,
    m0_meta: false,
    m0_nbtTag: false
};
inputBoxInfo[0].inputBoxDefault = {
    m0_x: "0",
    m0_y: "0",
    m0_z: "0",
    m0_id: "0",
    m0_meta: "0",
    m0_nbtTag: ""
};
inputBoxInfo[0].inputBoxForce = {
    m0_x: true,
    m0_y: true,
    m0_z: true,
    m0_id: true,
    m0_meta: false,
    m0_nbtTag: false
};
inputBoxInfo[0].inputBoxFormat = {
    m0_x: /(~?-?\d+|~)/g,
    m0_y: /(~?-?\d+|~)/g,
    m0_z: /(~?-?\d+|~)/g,
    m0_id: /[\w:]+/g,
    m0_meta: /\d+/g,
    m0_nbtTag: /.+/g
};

inputBoxInfo[1] = [];
inputBoxInfo[1].modeClass = ["inputMode1_display"];
inputBoxInfo[1].textClass = ["inputMode1"];
inputBoxInfo[1].inputBoxIdList = ["m1_rawCommand"];
inputBoxInfo[1].inputBoxDisplayDefault = {
    m1_rawCommand: "Command"
};
inputBoxInfo[1].isInputBoxEnabled = {
    m1_rawCommand: false
};
inputBoxInfo[1].inputBoxDefault = {
    m1_rawCommand: ""
};
inputBoxInfo[1].inputBoxForce = {
    m1_rawCommand: true
};
inputBoxInfo[1].inputBoxFormat = {
    m1_rawCommand: /.+/g
};

inputBoxInfo[2] = [];
inputBoxInfo[2].modeClass = ["inputMode2_display"];
inputBoxInfo[2].textClass = ["inputMode2"];
inputBoxInfo[2].inputBoxIdList = ["m2_x0", "m2_y0", "m2_z0", "m2_x1", "m2_y1", "m2_z1", "m2_id", "m2_meta", "m2_nbtTag"];
inputBoxInfo[2].inputBoxDisplayDefault = {
    m2_x0: "X1",
    m2_y0: "Y1",
    m2_z0: "Z1",
    m2_x1: "X2",
    m2_y1: "Y2",
    m2_z1: "Z2",
    m2_id: "id",
    m2_meta: "meta",
    m2_nbtTag:...