JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<div id="main">
		<div id="header">
		</div>
		<div id="menupane">
			<a href="#" class="buttons">Test</a>
			<a href="#" class="buttons">Test</a>
			<a href="#" class="buttons">Test</a>
			<a href="#" class="buttons">Test</a>
			<a href="#" class="buttons">Test</a>
			<a href="#" class="buttons">Test</a>
			<a href="#" class="buttons">Test</a>
			<a href="#" class="buttons">Test</a>
		</div>
		<div id="body">
		</div>
		<div id="footer">
		Hello
		</div>
	</div>

CSS

#main
{
	width: 60em;
	height: 36em;
	margin: auto;
}

#header
{
	background-color: #00c0ff;
	height: 5em;
}

#menupane
{
	background-color: green;
	width: 10em;
	height: 28em;
	float: left;
}

.buttons
{
	color: #1f3568;
	text-decoration: none;
	font-family: courier new;
	color: #000000;
	margin-right: 0px;
	line-height: 40px;
	text-align: center;
	display: block;
}

.buttons:hover
{
	background-color: #ff9600;
}

#body
{
	background-color: yellow;
	float: right;
	height: 28em;
	width: 50em;
}

#footer
{
    clear:both;
	background-color: red;
	height: 3em;
}