JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Spliced Genesect || Pokemon Battle Network</title>
	<link rel="stylesheet" type="text/css" media="screen" href="SGwebsite.css" />
  </head>

  <body>
	      <!-- Masthead begins -->
				
				<div id="masthead">
				  <div class="searchbox">
					<form>
					  <fieldset>
						<legend>Search the Site</legend>
						<input type="text" name="keywords" size="15" /><input type="submit"
						value="Go" />
						</fieldset>
				  </form>
					</div>
					
					<h1><img src="images/genesectLogo.png" alt="Genesect" />
					<img src="images/pokemonLogo.png" alt="SG Logo" /></h1>
				</div>
				
				<!-- Masthead ends, container begins -->
				
				<div id="container">
				
				<!-- Side bar begins, container for faux column begins -->
				
				<div id="fauxCol">
				
				<div id="sidebar">
				<p>
				  <ul>
					<li><a href="">Homepage</a></li>
					<li><a href=""><abbr title="Pokemon Entry of the Week">PEotW</abbr></a></li>
					<li><a href="">Team Layouts</a></li>
					<li><a href="">Archive</a></li>
					<li><a href="">About the Site</a></li>
					<li><a href="">Contact Us</a></li>
					</ul>
				</p>
				</div>
				
				<!-- Side bar ends, Content begins -->
				
				<div id="content">
				<p>Lorem ipsum dolor sit amet, sed duis indoctum evertitur eu, movet 
				disputando nec id. Graecis vituperata an sit, pri in veritus mentitum, 
				eam ea iisque iuvaret. Nam ea ubique ancillae adolescens, te mea dicta 
				contentiones, augue facilis consequat ea sea. An pro error epicurei, 
				viderer inimicus cu mei, movet menandri duo ne.</p>
				<p>Lorem ipsum dolor sit amet, sed duis indoctum evertitur eu, movet 
				disputando nec id. Graecis vituperata an sit, pri in veritus mentitum, 
				eam ea iisque iuvaret....

CSS

/* Body Declarations for the all elements */
body {
  font: normal 62.5% "Sharktooth","Lucida Sans Unicode", Verdana, sans-serif;
	padding:0;
	margin:0;
	}
	
/* container declarations */
#container {
  margin:0 auto 0 auto;
  width:760px;
	}
	
/* masthead and descendants */
#masthead {
  font-size:1.3em;
	height:160px;
	margin-top:0;
	margin-bottom:10px;
  background:url(images/mastheadback.gif) repeat-x;
	}
	
/* Masthead logos */
#masthead h1 img {
  height:120px;
	position:relative;
	left:20px;
	top:20px;
	}
	
/* search box holding the form */
.searchbox {
  float:right;
	width:220px;
	margin:15px;
	}
	
/* form legends */
.searchbox legend {
  border:solid 1px #666;
	padding:3px;
	background:#CCC;
	}
	
.searchbox input {
  border:3px double #666;
	margin-right:2px;
	}
	
/* Faux column for sidebar and content */
#fauxCol {
  background:url(images/faux.gif) repeat-y;
	}
	
/* sidebar and descendants */
#sidebar {
  font-size:1.4em;
  margin:0;
	padding:10px;
	background-color:#999;
  float:left;
	width:160px;
	}
	
/* Sidebar list styling */
#sidebar ul {
  list-style-type:none;
	margin:0;
	padding:2px;
	border:1px solid #fff;
	}
	
#sidebar li {
  background:#DDD;
	border-style:solid;
	border-width:1px;
	border-color: #fff #aaa #666 #fff;
	font:bold 1em "Sharktooth","Lucida Grande",Verdana,sans-serif;
	}
	
/* link styling for the sidebar */
a:link, a:visited, a:hover, a:active {
  text-decoration:none;
	display:block;
	padding:2px 10px;
	}
	
a:link { color:black; }
a:visited { color:purple; }
a:hover {
  color:#fff;
	background:black;
	}
	
/* content and descendants */
#content {
  text-align:justify;
	font-size:1.5em;
	line-heigh:150%;
  padding:10px;
	margin-left:200px;
	margin-right:0;
	width:540px;
	background-color:#CCC;
	}
	
/* footer and descendants */
#footer {
  font-size:1.3em;
  margin-top:10px;
  clear:both;
	background-color:red;
	}

/* footer col styling/positioning */
.footerCol {
  background-color:green;
  width:180px;
  float:left;
	margin:10px...