JSFiddle - React, Tailwind, and code Playground

by Oliver Murfett

HTML

<!DOCTYPE html>
<html>
<head>
	
	<title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
	
<body style="margin: 0px;">

	<div class = "header" id = "header">
	
		<img style="width: 100%; position: absolute;  height: 46px; " src="Gradient-Background_121.jpg">
    	<p class = "header-heading">OliverMurfett<small><small>.com</small></small></p>
		<p class = "header-links" style = "text-align: right;"> 
			<a href="" class = "hvr-underline-from-center" data-hover="Home" >Home</a>
			<a href="" class = "hvr-underline-from-center" data-hover="About" >About</a>
			<a href="" class = "hvr-underline-from-center" data-hover="Contact Me" >Contact Me</a>
		</p>
		<div style = "clear: both"> </div>
    </div>
	
	
	
	<div class = "content-body" id="content-body">
		<p>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			
	</div>
	
	
</body>
</html>

CSS

.header {
	background: rgba(255,255,255, 0.5);
	position: fixed;
	z-index: 3;
	padding: 0px;
	z-index: 1000;
	width: 100%;
		
}

.header-heading {
	float: left;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 2em;
	font-size: 16pt;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	z-index: 4;
	position: absolute;
}

.header-links {
	float: right;
	margin-right: 2em;
	margin-top: 1em;
	margin-bottom: 0.5em;
	z-index: 4;
	position: relative;
}

.header-links a {
	font-family: Arial, Helvetica, sans-serif;
	
	font-size: 12pt;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	color: rgba(94, 94, 94, 1);
	text-decoration: none;
	border-bottom: 1px solid rgba(94, 94, 94, 0);
	-webkit-transition: border 500ms;
	-moz-transition: border 500ms;
	-ms-transition: border 500ms;
	-o-transition: border 500ms;
	transition: border 500ms; 
	
}
	
.header-links  a::before {
	content: attr(data-hover);
	color: black;;
	position: absolute;

	transition: transform 500ms, opacity 500ms;
	-moz-transition: -moz-transform 500ms, opacity 500ms;
	-webkit-transition: -webkit-transform 500ms, opacity 500ms;
}



.header-links a:hover::before,
.header-links a:focus::before {
	opacity: 0;
}

.header-links a:hover {
	border-bottom: 1px solid rgba(94, 94, 94, 1);
	
}

.content-body {
	width: 70%;
	background-color: rgba(255,255,255,0.5);
	height: blue;
	position: absolute;
	margin: auto;
	height: 595px;
	z-index: 3;
	margin-left: 15%;
	margin-top: 46px;
}