JSFiddle - React, Tailwind, and code Playground

HTML

<h2>camera table</h2>
<table id="webcam-table2">
    <thead>
        <tr>
            <th>Camera <br>Type</th>
            <th>Name</th>
            <th>Quality</th> 
            <th>Motion <br>Detection</th>  
            <th>Email <br>Notice</th> 
            <th>Camera Actions</th> 
        </tr>  
    </thead>     
    <tbody>      
        <tr data-hash="6ab000ef7926b4a182f0f864a0d443fc19a29fdd">    
            <td>WEBCAM</td> 
            <td>test2</td>  
            <td>MOBILE</td>   
            <td>On</td>  
            <td>On</td>
            <td>                         
                <button id="editbutton" onClick='edit(this, "/my-dashboard", "WEBCAM", "test2", "2", "6ab000ef7926b4a182f0f864a0d443fc19a29fdd", "0", "0", "1", "", "", "", "")'>Edit</button>                   
                <button id="delete" onClick='deletecamera("/my-dashboard","6ab000ef7926b4a182f0f864a0d443fc19a29fdd")'>Delete</button>
                <button id="monitor" onClick='startmonitor("/my-dashboard","6ab000ef7926b4a182f0f864a0d443fc19a29fdd","test2","2")'>Monitor</button>
            </td> 
        </tr>  
    </tbody>
    <tbody> 
        <tr data-hash="4947c819a6763bed6fe18653b7af26fec8c33eca">
            <td>AXIS</td>
            <td>myaxiscamera</td>
            <td>HIGH</td>
            <td>Off</td>
            <td>Off</td> 
            <td>
                <button id="editbutton" onClick='edit(this, "/my-dashboard", "AXIS", "myaxiscamera", "0", "4947c819a6763bed6fe18653b7af26fec8c33eca", "1", "1", "0", "test", "", "10.0.0.666", "787")'>Edit</button> 
                <button id="delete" onClick='deletecamera("/my-dashboard","4947c819a6763bed6fe18653b7af26fec8c33eca")'>Delete</button> 
                <button id="monitor" onClick='startmonitor("/my-dashboard","4947c819a6763bed6fe18653b7af26fec8c33eca","myaxiscamera","0")'>Monitor</button> 
            </td>
        </tr> 
    </tbody> 
</table>
<br><br>

<h2>add camera table</h2>
<form id="add_webcam_camera_form"...

CSS

html
{
    height:100%;
    border-left:none;
    border-right:none;
    overflow:auto;
}

body
{
    height:100%;
    margin:0;
    padding:0;
    overflow:auto;
} 

#webcam-table {
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    font-size: 12px;
    table-layout: auto;
    text-align: left;
    white-space: nowrap;
}

#webcam-table th 
{
    background: none repeat scroll 0 0 #808184;
    border-bottom: 1px solid #2B3D61;
    border-top: 4px solid #2B3D61;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#webcam-table td {
    background: none repeat scroll 0 0 #eeeeee;
    border-bottom: 1px solid #2B3D61;
    border-top: 1px solid transparent;
    color: #333333;
    padding: 8px;
}

#webcam-table tr:hover td {
    background: none repeat scroll 0 0 #a8cb17;
    color: #333399;
}

#webcam-table2 {
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    font-size: 12px;
    table-layout: auto;
    text-align: left;
    white-space: nowrap;
}

#webcam-table2 th 
{
    background: none repeat scroll 0 0 #808184;
    border-bottom: 1px solid #2B3D61;
    border-top: 4px solid #2B3D61;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#webcam-table2 td {
    background: none repeat scroll 0 0 #eeeeee;
    border-bottom: 1px solid #2B3D61;
    border-top: 1px solid transparent;
    color: #333333;
    padding: 8px;
}

#webcam-table2 tr:hover td {
    background: none repeat scroll 0 0 #a8cb17;
    color: #333399;
}

#video{
position: absolute; left: 50px; top: 100px;
}

#table{
position: absolute; right: 50px; top: 100px;
}

 #EditCameraForm label, input, select, textarea {
        display: block;
        width: 200px;
        float: left;
        margin-bottom: 1em;
        margin-top: 0.5em;
    }

   ...