JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<link href="globalCSS.css" type="text/css" rel="stylesheet" />

<title>Jon Ferriter</title>

</head>

<body>
	<div id="wrapper">

		<div id="banner">  
			JONATHAN FERRITER
		</div>

		<div id="navBar">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio.html">Portfolio</a></li>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</div>

		

		<div id="content">
		
			<p> 
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam....

CSS

* {margin: 0px;
	padding: 0px;
	}


@font-face {
    font-family: 'SlimFastAHRegular';
    src: url('fonts/slimfast.eot');
    src: url('fonts/slimfast.eot') format('embedded-opentype'),
         url('fonts/slimfast.woff') format('woff'),
         url('fonts/slimfast.ttf') format('truetype'),
         url('fonts/slimfast.svg#SlimFastAHRegular') format('svg');
}

@font-face {
    font-family: 'MuroRegular';
    src: url('fonts/muroregular.eot');
    src: url('fonts/muroregular.eot') format('embedded-opentype'),
         url('fonts/muroregular.woff') format('woff'),
         url('fonts/muroregular.ttf') format('truetype'),
         url('fonts/muroregular.svg#MuroRegular') format('svg');
}

@font-face {
    font-family: 'FlatBreadMedium';
    src: url('fonts/flatbread.eot');
    src: url('fonts/flatbread.eot') format('embedded-opentype'),
         url('fonts/flatbread.woff') format('woff'),
         url('fonts/flatbread.ttf') format('truetype'),
         url('fonts/flatbread.svg#FlatBreadMedium') format('svg');
}

@font-face {
    font-family: 'AmaticSCRegular';
    src: url('fonts/amaticsc-regular.eot');
    src: url('fonts/amaticsc-regular.eot') format('embedded-opentype'),
         url('fonts/amaticsc-regular.woff') format('woff'),
         url('fonts/amaticsc-regular.ttf') format('truetype'),
         url('fonts/amaticsc-regular.svg#AmaticSCRegular') format('svg');
}

@font-face {
    font-family: 'AmaticBold';
    src: url('fonts/amatic-bold.eot');
    src: url('fonts/amatic-bold.eot') format('embedded-opentype'),
         url('fonts/amatic-bold.woff') format('woff'),
         url('fonts/amatic-bold.ttf') format('truetype'),
         url('fonts/amatic-bold.svg#AmaticBold') format('svg');
}

a { color: #fff; text-decoration: none; -webkit-transition: all .2s ease-in-out;   -moz-transition: all .2s ease-in-out;   -o-transition: all .2s ease-in-out;   transition: all .2s ease-in-out;}
a:hover { color: #EF3C4E; -webkit-transition: all .2s ease-in-out;  ...