JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>RiskMan Entry</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/RiskmanPresentation.css?vsn=160200.1602192300"/>
<link rel="stylesheet" type="text/css" media="all" href="virtualpage.aspx?f=RMIStyles.css&vsn=160200.1602192300"/>
<link rel="stylesheet" type="text/css" media="all" href="css/ui-redmond/jquery-ui-1.9.2.custom.min.css?vsn=160200.1602192300"/>
<script type="text/javascript" src="sdks/modernizr-310.js?vsn=160200.1602192300"></script>
<link rel="stylesheet" type="text/css" media="all" href="virtualpage.aspx?f=RMICore.css,RMINet.css&vsn=160200.1602192300"/>
<link rel="stylesheet" type="text/css" media="all" href="css/font-awesome/css/font-awesome.min.css?vsn=160200.1602192300"/>
<script type="text/javascript" src="jscripts/jquery-1.9.1.min.js?vsn=160200.1602192300"></script>
<script type="text/javascript" src="jscripts/jquery-ui-1.9.2.custom.min.js?vsn=160200.1602192300"></script>
<link rel="stylesheet" type="text/css" media="all" href="virtualpage.aspx?f=clientCSS.css&vsn=160200.1602192300"/>
<link rel="stylesheet" type="text/css" media="all" href="css/tablesorter/style.css?vsn=160200.1602192300"/>
<script type="text/javascript" src="jScripts/json2.js?vsn=160200.1602192300"></script>
<script type="text/javascript" src="jscripts/jquery-ui-timepicker-addon.js?vsn=160200.1602192300"></script>
<script type="text/javascript" src="jScripts/jquery.tablesorter.min.js?vsn=160200.1602192300"></script>
<script type="text/javascript" src="jScripts/jquery-migrate-1.2.1.min.js?vsn=160200.1602192300"></script>
<script type="text/javascript" src="virtualpage.aspx?f=RMICore.js,RMINet.js,RMIUtils.js&vsn=160200.1602192300"></script>
<script type="text/javascript" src="jScripts/CKEditor/ckeditor.js?vsn=160200.1602192300"></script>
<script type="text/javascript" src="jScripts/ElementCreateTools.js?vsn=160200.1602192300"></script>
<script type="text/javascript"...
CSS
body,html {
min-width:600px;
height:100%;
margin:0;
padding:0;
font-family:Calibri;
overflow:hidden;
}
#header-container {
width:100%;
clear:both;
position:relative;
}
#body-container {
width:70%;
margin:20px auto 0 auto;
border:solid 1px #000000;
}
#header-links {
width:100%;
}
#header-links .left {
width:120px;
float:left;
padding:5px 10px 5px 10px;
}
#header-links .right {
width:50px;
float:right;
padding:5px 10px 5px 10px;
}
#header {
width:100%;
height:160px;
}
header {
width: 100%;
min-width: 800px;
height: 160px;
overflow: auto;
}
.ex1 .header-left {
display:inline-block;
width: 33%;
max-width: 190px;
float: left;
margin:50px 0 0 70px;
}
.ex1 .logo {
width: 409px; /* width of the logo */
margin:10px auto 0 auto;
}
.ex1 .logo img {
display: block;
}
.ex1 .header-right {
display:inline-block;
width: 33%;
max-width: 190px;
float: right;
margin:50px 70px 0 0;
}
span {
margin:0 20px;
}
#latest-products-box-left {
width:48%;
height:250px;
margin:10px 5px 20px 5px;
display:inline;
float:left;
border:dashed #000000 1px;
}
#latest-products-box-right {
width:48%;
height:250px;
margin:10px 5px 20px 5px;
display:inline;
float:right;
border:dashed #000000 1px;
}
#footer {
width:99%;
position: relative;
margin-top: -150px;
padding:10px 10px 10px 10px;
height: 80px;
clear:both;
text-align:center;
background-color: #d7d7d7;
color: #666666;
}