JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<!--boarder of program-->
<div id="program">
<!--start of preview box-->
<div id="preview">
<br>
</div>
<!--end of preview box-->
<!--start of form box-->
<div id="form">
<!--start of top variables table-->
<div id="variables">
<table class="variablesTable">
<tbody>
<tr>
<td>
<label for="loadedProfile">loaded Profile:</label>
<br>
<input name="loadedProfile" id="loadedProfile" value="N/A" type="text">
</td>
<td>
<label for="generationCount">Generation Count:</label>
<br>
<input name="generationCount" id="generationCount" value="0" type="text">
</td>
<td>
<label for="applicationMode">Application Mode:</label>
<br>
<input name="applicationMode" id="applicationMode" value="Standard" type="text">
</td>
<td>
<label for="Generation">Profiles/Generation:</label>
<br>
<input name="Generation" id="Generation" value="6" type="text">
</td>
</tr>
</tbody>
</table>
</div>
<!--end of top variables table-->
<!--start of file choosing section-->
<div id="fileChoose">
<form id="filesForm" action="post" enctype="multipart/form-data">
<input name="filesToUpload[]" id="filesToUpload"...
CSS
#header {
background-color: #65CCFF;
color: white;
text-align: center;
}
#program {
width: 1200px;
height: 600px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
}
#preview {
width: 36%;
height: 99%;
float: right;
border-style: solid;
border-width: 2px;
}
#form {
width: 62%;
height: 100%;
float: left;
}
#variables {
width: 100%;
height: 10%;
}
#fileChoose {
width: 100%;
height: 10%;
border-style: solid;
border-width: 1px;
}
#iframeTable {
width: 100%;
height: 68%;
border-style: solid;
border-width: 2px;
#iframeTable .tableframes {
align: middle;
frameBorder: 0;
}
}
#buttons {
width: 100%;
height: 10%;
}