JSFiddle - React, Tailwind, and code Playground

HTML

<div id="employeeDiv" class="tableDiv empDiv">
    Sample Table containing rows dynamically added.
    <table id="employeeTable">   
        <tr><th>Employee ID</th><th>Employee Address</th></tr>
    </table>
</div>

<script>

	var newTable=document.getElementById("employeeTable");
	
	newtablebody = document.createElement("TBODY");
	newRow   = document.createElement("TR");
    
    // Dynamix Column 1
    var displayname = 'test';
    newCell = document.createElement("TD");
    newCell.setAttribute("style", "white-space:nowrap; text-align:right;");
	textNode = document.createTextNode("John");
	newCell.appendChild(textNode);
	newRow.appendChild(newCell);
    
    // Dynamix Column 2
    newCell2 = document.createElement("TD");
    newCell2.setAttribute("style", "white-space:nowrap; text-align:right;");
	textNode = document.createTextNode("Oliver");
	newCell2.appendChild(textNode);
	newRow.appendChild(newCell2);
    
    newTable.appendChild(newRow);
</script>

CSS

body { background-color: #EFFFEF; color: #000000; }
a { color: aqua; }
.employeeTable {
    border : solid 1px #000000;color: #0000FF; margin : 10px; background : #FFEFFF; height : 100px;  float : left; overflow : auto;  
}
.employeeTable {
    width : 70%;
    border : 1px solid;
}
.empLink {
    color : #0000FF;
}
.column{
    padding-left : 10px;
}
.even {
    background : #EFDFEF;
}

table{
    border : 1px solid;
}


table th{
    border : 1px solid;
}