JSFiddle - React, Tailwind, and code Playground

HTML

<body>
			<div id="page">
				<div class="container">
					<header>
						<h2><a href="index.html">Friendly View</a></h2>
					</header>
						<ul>
							<a href="index.html"><li>Home</li></a>
							<a href="about.html"><li>What We Bring To the Table</li></a>
							<a href="services.html"><li>What we do</li></a>
							<a href="contact.html"><li>How to Contact us</li></a>
						</ul>
				</div>
			</div>
			<div id="p1">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pulvinar, cursus lorem ut, sagittis sem. Nunc laoreet, neque nec luctus elementum, metus tortor pharetra nisi, eu commodo diam erat quis purus. Vivamus mattis libero sapien, at placerat eros mattis suscipit. Aliquam ante massa, porttitor id tincidunt porttitor, molestie nec sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam iaculis sit amet justo a commodo. Curabitur cursus varius libero, a sagittis nisi auctor at. Cras iaculis, enim sed mollis fermentum, mauris risus pretium purus, at feugiat orci risus in purus.
				</p>
			</div>
		</div>
			</body>
		</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Merriweather);

*
{
	text-decoration: none;
	box-sizing: border-box;
}

body
{
	background-color: #ff9900;
	font-family: 'Merriweather', serif;
}

#page
{
	margin: -8px;
}

#wrapper
{
	/*margin: 1px;*/
}

h2>a 
{
	margin: -25px;
	float: left;
	background-color: #ffde00;
	color: #097054;
	padding: 20px;
}

h2>a:hover 
{
	color: #ffde00;
	transition: .5s ease;
	background-color: #6599ff;
}

.container
{
	padding: 6px;
	padding-right: 50px;
	padding-left: 20px;
	text-align: center;
	background-color: #097054;
}

ul li
{
	background-color: #ffde00;
	display: inline;
	margin: 0 auto;
	padding: 10px;
	color: #097054;
	font-weight: 900;
	font-size: 14pt;
}


ul li:hover
{
	transition: .5s ease;
	background-color: #097054;
	border-color: #25C1BC;
	color: #ffde00;

}

#p1
{
	color: #097054;
	height: 25em;
	width: 25em;
	background-color: #097054;
	margin-left: 8px;
	margin-top: 20px;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 500ms;
}

p
{
	background-color: #ffde00;
	padding: 20px;
	margin-top: 8px;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 500ms;
}

#p1:hover;
{
	/*background-color: #000000;*/
}

p:hover
{
	height: -75%;
	width: -75%;
	padding-bottom: 3.8em;
	box-shadow: -5px -5px 0px 0px #097054;
	margin-top: 3em;
	color: #ffde00;
	background-color: #6599ff;
	font-weight: 600;
}