JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id='wrap'>
		<div id='nav'>
			<ul>
				<li><a href='/'>Page 1</a></li>
                <li><a href='/'>Page 2</a></li>
                <li><a href='/'>Page 3</a></li>
                <li><a href='/'>Page 4</a></li>
			</ul>
            <div class="login">
                Login
            </div>
		</div>
        <div id='content'>
			<div id='content-header'>
				<h1> Page Title </h1>
				<h3>Subline 1</h3>
                <br />
				Subline 2
			</div>

			<table>
				<tr>
					<th>Item 1</th>
					<th>Item 2</th>
					<th>Item 3</th>
					<th>Item 4</th>
				</tr>

				<tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
          ...

CSS

html{
	margin:0px;
	padding:0px;
}
body{
	text-align:center;
	font-family: 'Open Sans', sans-serif;
	width: 1360px;
	height: 768px;
	margin:0px;
	padding:0px;
	overflow: hidden;
	
	top:0px;
	left:0px;
	
	color: #6D7077;
	background: #272E36;
}
h1{
	margin-bottom: 0px;
	margin-top: 0px;
	text-align: center;
}
h2{
	margin-bottom: 0px;
	margin-top: 0px;
	text-align: center;
}
h3{
	margin-bottom: 0px;
	margin-top: 0px;
	text-align: center;
}
#nav h1{
	display:inline-block;
}
#nav h2{
	display:inline-block;
}
#nav h3{
	display:inline-block;
}
#content-header h3{
	display:inline-block;
}
table {
	width: 1088px;
	height: 275px;
	float: center;
	text-align: center;
	border-collapse: collapse;
}
th{
	background:#40464D;
	color: #ffffff;
    border: 1px solid white;
	border-left: none;
	border-right: none;
}
td{
    border: 1px solid white;
	border-left: none;
	border-right: none;
}
tr:nth-child(even){
	background: #40464D;
}
tr:nth-child(odd){
}
a {
	color:#ffffff;
	text-decoration:none;
}
a:visited {
	color:#ffffff;
	text-decoration:none;
}
a:hover {
	color:#6D7077;
	text-decoration:none;
}
#wrap {
	min-height:760px;
	height: auto;
	float: center;
}
#content {
	padding-bottom:38px;
	margin-left: auto;
	margin-right: auto;
    width: 1088px;
	height: 450px;
	text-align:center;
	float:center;
}
#content-header{
	margin-left: auto;
	margin-right: auto;
	width: 1088px;
	height: 115px;
	float:center;
}
#footer {
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 38px;
	width: 1360px;
	float:center;
}
#defaultcolor {
	background: #272E36;
	text-align:center;
}
#nav {
	margin-top:0px;
	top:0px;
	width: 1360px;
	height: 100px;
	background: #40464D;
	float:center;
}
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	width:1300px;
}

li {
	display: inline-block;
}

li > a...

JavaScript

$(document).ready(function() {
	/* Mark all CSS objects in px form for width and height */
	var HEIGHT = 768;
	var WIDTH = 1360;
	
	factor_x = ($(window).width( )) / WIDTH;
	factor_y = ($(window).height()) / HEIGHT;

	$('html').css("transform","scale("+factor_x+","+factor_y+")");
	$('html').css("-moz-transform","scale("+factor_x+","+factor_y+")"); 
	$('html').css("-webkit-transform","scale("+factor_x+","+factor_y+")");
	$('html').css("-o-transform","scale("+factor_x+","+factor_y+")");
});
$(window).resize(function() {
	/* Mark all CSS objects in px form for width and height */
	var HEIGHT = 768;
	var WIDTH = 1360;
	
	factor_x = ($(window).width( )) / WIDTH;
	factor_y = ($(window).height()) / HEIGHT;

	$('html').css("transform","scale("+factor_x+","+factor_y+")");
	$('html').css("-moz-transform","scale("+factor_x+","+factor_y+")"); 
	$('html').css("-webkit-transform","scale("+factor_x+","+factor_y+")");
	$('html').css("-o-transform","scale("+factor_x+","+factor_y+")");
});