JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">Panels test</div>
<div id="wrapper">
	<div id="gameboard">
		<ul id="panellist">
			<li>Panel 1</li>
			<li>Panel 2</li>
			<li>
				<div class="rownumber">3</div>
				<div class="peg"></div>
				<div class="peg"></div>
				<div class="peg"></div>
				<div class="hintcontainer">
					<div class="hintpeg"></div>
					<div class="hintpeg"></div>
					<div class="hintpeg"></div>
				</div>
			</li>
			<li>
				<div class="rownumber">4</div>
				<div class="peg"></div>
				<div class="peg"></div>
				<div class="peg"></div>
				<div class="peg"></div>
				<div class="hintcontainer">
					<div class="hintpeg"></div>
					<div class="hintpeg"></div>
					<div class="hintpeg"></div>
					<div class="hintpeg"></div>
				</div>
			</li>
			<li>
				<div class="rownumber">5</div>
				<div class="peg peg_1"></div>
				<div class="peg peg_2"></div>
				<div class="peg peg_3"></div>
				<div class="peg peg_4"></div>
				<div class="peg peg_6"></div>
				<div class="hintcontainer">
					<div class="hintpeg"></div>
					<div class="hintpeg hintpeg_1"></div>
					<div class="hintpeg hintpeg_2"></div>
					<div class="hintpeg hintpeg_1"></div>
					<div class="hintpeg"></div>
				</div>
			</li>
		</ul>
	</div>
</div>
<div id="footer">
	<div class="selectpeg peg_1"></div>
	<div class="selectpeg peg_2"></div>
	<div class="selectpeg peg_3"></div>
	<div class="selectpeg peg_4"></div>
	<div class="selectpeg peg_5"></div>
	<div class="selectpeg peg_6"></div>
	<div class="selectpeg peg_7"></div>
	<div class="selectpeg peg_8"></div>
</div>

CSS

body,ul,li {
	padding:0;
	margin:0;
	border:0;
}

body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}

#header {
	position:absolute; z-index:2;
	top:0; left:0;
	width:100%;
	height:60px;
	line-height:60px;
	background-color:#004080;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #64a4e4), color-stop(1, #004080));
	background-image:-moz-linear-gradient(top, #64a4e4, #004080);
	background-image:-o-linear-gradient(top, #64a4e4, #004080);
	padding:0;
	color:#eee;
	font-size:20px;
	text-align:center;
}

#header a {
	color:#f3f3f3;
	text-decoration:none;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
	position:absolute; z-index:2;
	bottom:0; left:0;
	width:100%;
	height:60px;
	background-color:#004080;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #64a4e4), color-stop(1, #004080));
	background-image:-moz-linear-gradient(top, #64a4e4, #004080);
	background-image:-o-linear-gradient(top, #64a4e4, #004080);
	padding:0;
}

#wrapper {
	position:absolute; z-index:1;
	top:60px; bottom:60px; left:0;
	width:100%;
	background:#aaa;
	overflow:auto;
}

#gameboard {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

#gameboard ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#gameboard li {
	/* padding:0 10px; */
	height:60px;
	line-height:40px;
	/* border-bottom:1px solid #ccc; */
	/* border-top:1px solid #fff; */
	color:#f3f3f3;
	font-size:14px;
	background-color:#000000;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #646464), color-stop(1, #000000));
	background-image:-moz-linear-gradient(top, #646464, #000000);
	background-image:-o-linear-gradient(top, #646464, #000000);
}

.rownumber{
	display: block;
	float: left;
	text-align:center;

	width: 40px;
	height: 100%;
}

.selectpeg{
	display: block;
	float:...