JSFiddle - React, Tailwind, and code Playground

by Tim Staley

HTML

<div id="master_wrapper">
	<div id="top_wrapper" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-widget ui-widget-content custom-combobox-input ui-widget ui-widget-content">
	</div>

<div id="window_wrapper">
	<div id="wrapper_1">
		<div class="sub_wrapper_1">
			<div class="table_1_wrapper">
				<div class="table_header ui-widget-header">
					<div class="table_header_inner">
						<span class="group_cb">&nbsp;</span><span class="name_header_pos">Title 1</span><span class="member_header_pos">Title 2</span>
					</div>
				</div>
				<div class="table_wrapper">
					<table>
						<tbody>
							<tr><td class="flex">r1</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r2</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r3</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r4</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r5</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r6</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r7</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r8</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r9</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r10</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r11</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r12</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r13</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r14</td><td class="fixed">1</td></tr>
							<tr><td class="flex">r15</td><td class="fixed">1</td></tr>					
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="wrapper_2">
		<div class="table_2_header ui-widget-header">
			<div class="table_header_inner">
				<span class="group_cb">&nbsp;</span><span class="name_header_pos">Title 1</span><span class="member_header_pos">Title 2</span>
			</div>
		</div>
		<div class="fixed_table_wrapper">
			<table cellpadding="0"...

CSS

/* 
Site Wide Styles 
*/
body {
	background-color: #e9e9e9;
	height: 100% !important;
	font-size: 14px;
	margin: 0;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
html {
	background: #e9e9e9;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
html, body, .viewport {
	width: 100%;
	height: 100%;
	margin: 0;
}

/* 
Main wrapper 
*/
#master_wrapper {
	width:100%;
	height:100%;
	min-width:1160px;
	min-height:300px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif; 
	font-size: 1em;
	display: flex;
	flex-direction: column;
	flex: auto;
}


/* 
Header wrapper
*/
#top_wrapper {
	height: 70px;
	min-width:885px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	flex: 0 0 auto;
	background-color: #000;
}
.banner_position {
	display: inline-block;
	background-color:#2483d0;
	width:280px;
	height:70px;
	float:left;
}

/* 
Window wrapper for all pages 
*/
#window_wrapper {
	min-width: 800px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom;70px;
	background-color: #fbfbfb;
	padding-bottom: 15px;
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif; 
	font-size: 1em;
	flex-grow: 1;
}

/* 
Footer 
*/
#bottom-wrapper {
	height: 34px;
	min-width:885px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	border-top-left-radius:0px;
	border-top-right-radius:0px;
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	font-size: 1em;
	font-weight:normal;
	background-color: #000;
}

:focus {outline: none;}
input[type=button] {
	width:150px;
    height:30px;
}

#window_wrapper {
	background-color:#ffffff;
	display: flex;
	flex-direction:column;
}
#wrapper_1 {
	min-height: 100px;
	width: 100%;
	height: 100%;
	margin-top: 20px;
	text-align: left;
	display: flex;
	flex-grow: 1;
}
.wrapper_2...