JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <table id="main_table">
        <thead><html style=""><head><script>
    
function DateTime() {
    n= new Date();
    y=n.getFullYear();
    m=n.getMonth() + 1;
    d=n.getDate();
    t=n.getTime();
    document.getElementById("date").innerHTML = m + "/" + d + "/" + "/" + y;
}
    
function AdjustContentContainerWidth(){

	//var navigationMenu = document.getElementById("navigation_menu_container");
	//var navigationMenuWidth= navigationMenu.offsetWidth;
	
 	//var screenWidth = screen.width;
    //var contentSize = parseInt(screenWidth) - parseInt(navigationMenuWidth) - 250;

	var contentContainer = document.getElementById("content_container");
	var topArea = document.getElementById("top_area");
	var topAreaWidth = topArea.offsetWidth-1;
	contentContainer.style.width = topAreaWidth + 'px'; 
	
	//document.getElementById("debugout").innerHTML = "menu:" + navigationMenuWidth + "screen:" + screenWidth + "content:" + contentSize;
    
}
</script><style id="__web-inspector-hide-shortcut-style__" type="text/css">
.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ *, .__web-inspector-hidebefore-shortcut__::before, .__web-inspector-hideafter-shortcut__::after
{
    visibility: hidden !important;
}
</style></head>

<body onresize="AdjustContentContainerWidth()" onload="AdjustContentContainerWidth()" >
    <div style="
            width: 100%;
            /* border: 1px solid black; */
            overflow: hidden;
            ">
    <div id="navigation_menu_container" style="
                 max-width: 250px;
                 height:100%;
                 background-color: #006487;
                 /* border: 1px solid black; */
                 float: left;
                 display: inline-block;
                 /* width: 100%; */
                 "> 
    <div style="
                 width: 200px;
                 height: 50px;
                 /* background-color: #55a0b9; */
                 margin-top: 5px;
                 margin-left:...

CSS

* {
    margin: 0;
    padding: 0;
}

html {
    margin: 5px;
}

table {
    width: 100%;
    border-collapse: collapse;
    border: #000000 solid 1px;
}

#main_table {
    border-style: none;
    margin: auto;
    width: 90%
}

td, th {
    border: #000 solid 1px;
    padding: 2px;
}
.no-lines td, td.no-lines, .no-lines th, th.no-lines {
    border: none;
}
th {
    font-weight: bold;
}
input {
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    display: block;
}