JSFiddle - React, Tailwind, and code Playground

by Swobbleton

HTML

<div id="wrapper">
		<div id="navigation">
			<ul class="ca-menu">
				<li>
					<a href="#">
						<span class="ca-icon">F</span>
						<div class="ca-content">
							<h2 class="ca-main">Home</h2>
							<h3 class="ca-sub">Startpagina</h3>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="ca-icon">H</span>
						<div class="ca-content">
							<h2 class="ca-main">Portfolio</h2>
							<h3 class="ca-sub">Websites en drukwerk</h3>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="ca-icon">N</span>
						<div class="ca-content">
							<h2 class="ca-main">Over Ons</h2>
							<h3 class="ca-sub">Doel en motto</h3>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="ca-icon">K</span>
						<div class="ca-content">
							<h2 class="ca-main">Contact</h2>
							<h3 class="ca-sub">Adresgegevens</h3>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div id="content">
			<h1>Lorem Ipsum Dolor Sit Amet</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Quisque sed ligula vitae erat sollicitudin gravida. 
				Fusce adipiscing fringilla nibh ut feugiat. 
				In hac habitasse platea dictumst. 
				Donec ut nisi in dolor luctus eleifend. 
				Vivamus eleifend suscipit ipsum vitae posuere. 
				Morbi vestibulum erat eu nulla aliquet sagittis quis tempor lorem. 
				Sed orci nunc, dapibus eu cursus sit amet, fringilla a sapien. 
				Nullam non massa nunc.
			</p>
			<img src="http://www.dummyimage.com/400x300/000/fff.png">
		</div>
		<div id="footer">
			<p>Social Media - Sitemap - Copyright - Contact</p>
		</div>
	</div>

CSS

/* Kleuren
 *	Zwart 		- #000000
 *	Wit 		- #ffffff
 *	Cyaan 		- #0087ff
 *	Licht Cyaan - #4db8ff
 *	Licht Blauw	- #82cdff
 */

/* Basis begin */
body {
	background-image: url('http://www.dysign.nl/images/noise.png');
	background-color: #333333;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}
#content h1, h2, h3, p {
	font-family: Ubuntu, sans-serif;
	font-style: normal;
	font-weight: normal;
}
#content h1 {
	color: white;
	font-size: 22px;
	font-weight: bold;
	font-style: italic;
	padding: 5px;
	background-color: #0087ff;
	line-height: 22px;
}
#content h2 {
	color: #ffffff;
	font-size: 22px;
	font-weight: bold;
	font-style: italic;
	padding: 5px;
	background-color: #4db8ff;
	line-height: 22px;
}
#content h3 {
	color: #ffffff;
	font-size: 22px;
	font-weight: bold;
	font-weight: italic;
	padding: 5px;
	background-color: #82cdff;
	line-height: 22px;
}
#content p {
	color: #000000;
	font-size: 16px;
	margin: 4px;
	line-height: 18px;
}
#content a {
	color: #000000;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #000000;
}
#content a:hover {
	border-bottom-width: 1px;
	border-bottom-style: dashed; 
	border-bottom-color: #82cdff;
	color: #82cdff;
}
/* Basis einde */

/* Wrapper begin */
#wrapper {
	margin: 10px auto;
	padding: 0;
	width: 940px;
	height: 100%;
}
/* Wrapper einde */

/* Navigation bar begin */
#navigation {
	position: relative;
	width: 220px;
	height: 415px;
	margin: 10px 10px 10px 0;
	float: left;
}
@font-face {
	font-family: 'WebSymbolsRegular';
	src: url('http://www.dysign.nl/css/websymbols.eot');
	src: url('http://www.dysign.nl/css/websymbols.eot?#iefix') format('embedded-opentype'),
		 url('http://www.dysign.nl/css/websymbols.woff') format('woff'),
		 url('http://www.dysign.nl/css/websymbols.ttf') format('truetype'),
		 url('http://www.dysign.nl/css/websymbols.svg#WebSymbolsRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
.ca-menu{
    padding: 0;
    margin: 0 auto;
   ...