JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<!DOCTYPE html>
<html>
<head> 
	<title>Parallacks Gaming | Avaj</title>
	<link rel="icon" type="image/png" href="favicon.ico">
	<link href="main.css" rel="stylesheet" type="text/css"/>
	<link href='http://fonts.googleapis.com/css?family=Nunito:400,700' rel='stylesheet' type='text/css'>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
	<div id="container">
		<div id="titleArea">
			<h1 id="name">Parallacks Gaming</h1>
			<h4 id="subtitle">Independent Game Developer, Professional Proctastinator</h6>
			<img id="profileImg" src="http://i.imgur.com/cIuKFlf.png">
		</div>
		<div id="buttonMenu">
		    <a class="buttLink" href="index.html"><div class="button">Home</div></a>
			<a class="buttLink" href="games.html"><div class="button">My Games</div></a>
			<a class="buttLink" href="about.html"><div class="button">About Me</div></a>
			<a class="buttLink" href="contact.html"><div class="button">Contact</div></a>
		</div>
<div id="gameDescription">
			<h2 id="gamePageTitle">Avaj</h2>
			<img id="gameScreenshot" src="http://i.imgur.com/bzWjihz.jpg">
			<a class="buttLink" href="http://gamejolt.com/games/adventure/avaj/18144/" target="_blank"><div id="GJbutton" class="button"><i id="GJlinkBolt"class="fa fa-bolt"></i><br>Play on GameJolt</div></a>
			<div id="gameDescriptionText">
				<p>This is a text game that I have worked on for a bit. It is playable and I am working on adding the arena, balencing the weapons and monsters and making it a little more user friendly. It has been mainly inspired by the text game "Lord of the Red Dragon" and follows many of the same basic mechanics.The basic concept of the game is to advance by fighting monsters in the forest and gladiators in the arena.</p>
				<p>Check the news on GameJolt for upcoming updates, they're gonna be good.</p>
				<p>Also, if the response is good enough I will try my best to make a graphical version of it, but we'll see how that...

CSS

/* Background stuff */
body { 
  background-color: #3498db;
}
/* End of background stuff */

/* Text selection jazz */
::selection {
	background: rgba(167,12,31,0.5);
	}
::-moz-selection {
	background: rgba(167,12,31,0.5); 
}
/*End of text selection jazz*/

div::-webkit-scrollbar {
    width: 10px;
}
 
div::-webkit-scrollbar-track {
    background-color:#2980b9;
}
 
div::-webkit-scrollbar-thumb {
    background-color:#75b9e7;
}
h1,
h4,
h2 {
	font-family: 'Nunito', sans-serif;
	font-weight: 600;
	text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
}

a:link {color:#f1c40f;}      /* unvisited link */

a:visited {color:#f39c12;}  /* visited link */

#container{  
	position: relative;
	width: 100%;
	height: 100%;
	color:#ecf0f1;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 	
}

#name { 
	display:inline-block; 
	margin-left: 35%; 
	margin-top: 5%;
    font-weight: 300;	
}

#subtitle{
	display:inline-block;
	margin-left: 35%; 
}

#profileImg{
	display:block;
	margin-left: 20%;
	margin-top:-7.5%;
	border:2px solid #FCFCFC;
	border-radius:10%;
}

#buttonMenu{
	word-spacing: -1;
	position: absolute;
	width: 157px;
	margin-left:15%;
	margin-top: 5%;
	/* Prevent user from selecting shit */
	-webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}

.buttLink{
	text-decoration: none;
}

.button{
	display: inline-block;
	text-align: center;
	min-width: 100px;
	max-width: 100px;
	padding: 25px;
	margin-right: 1px;
	margin-top: 5%;
	margin-bottom: 5%; 
	border:2px solid #ecf0f1;
	color:#ecf0f1;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 	
}

.button:hover{
	background-color:#FCFCFC;
	color:#7f8c8d;
	cursor:pointer;
	select:none;
	
}

#mainDescription{
	width: 30%;
	display: block;
	margin-left: 30%;
	margin-top: 5.5%;
}
#footer{
	position:...