JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Concept ." />
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="js/jquery-2.1.1.min.js"></script>
	<script src="js/equalizer.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Roboto:300,300italic' rel='stylesheet' type='text/css'>
	<title>Concept</title>
</head>

<body onload="onLoad()">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<a name='cont' style='position:relative; top:-150px;'></a>
	<div class="container1">
		<a href="#cont1">
			<img src="img/down.png"></img>
		</a>
		<h1><?php echo $lines[1]; ?></h1>
		<a href="<?php echo $lines[2]; ?>"><h3><?php echo $lines[0]; ?></h3></a>
	<button type="button" class="btn" onclick="pauseMusic()">Pause/Play</button>
		<div class="canvasdiv">
			<audio id="music" src="<?php echo $files[$file] ?>" preload="auto"></audio>
		</div>
	</div>
	<a name='cont1' style='position:relative;'></a>
	<div class="container2">
		<a href="#cont">
			<img src="img/up.png"></img>
		</a>
		<h1>About</h1>
		<p><i>Chill</i> is a project designed to be a quick way to relieve stress with Chillstep music.</p>
	<h2>Credits</h2>
	<ul>
  		<li><strong>The Artists</strong> - To find out more about an artist, click their name when a song of theirs is playing.</li>
  		<li><strong>The Visualier</strong> - Edited code from <a href="http://themaninblue.com/experiment/webAudioAPI/">here</a>.</li>
  		<li><strong>The Design</strong> - Most design was done by me but some backgrounds are ripped from Google images.</li>
	</ul>

	</div>
	<script>
		/* 		Parallax Effect */
		function onLoad() {
			window.onscroll = function() {
				var speed = 1.5;
				document.body.style.backgroundPosition = (-window.pageXOffset / speed) + "px " + (-window.pageYOffset / speed) + "px";
			};
		}
		/* Pause Feature */
		function pauseMusic() {
			var audio =...

CSS

/*---------------------------------------------
* Filename:		style.css
* Description: 	Global CSS
* Version: 		1.0.0 (06-Jul-14)
* Website: 		http://cphn.ml/
* Author: 		Cephon
-----------------------------------------------*/

html {
	height: 100%;
}
body {
	/*background-image: url('http://i.imgur.com/HyyVv2O.png');*/
	background-attachment: fixed;
	background-size: inherit;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	color: white;
	height: 100%;
	text-shadow: black 0 0 4px;
}
html,body{
    padding:0;
    margin:0;
}
canvas {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.2);
}
.btn {
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3069ooo498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	font-family: Arial;
	color: #6b6b6b;
	font-size: 20px;
	background: #f2f2f2;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
}
.btn: hover {
	background: #e0e0e0;
	text-decoration: none;
}
.container1 {
	height: 100%;
}
.container2 {
	width: 100%;
	background-image: url('http://i.imgur.com/8OB0mDd.jpg');
	background-attachment: fixed;
	background-size: cover;
	margin: 0;
	position: absolute;
	left: 0;
	height: 100%;
}
img {
	max-width: 15vw;
	height: auto;
}
.container1 img {
	position: absolute;
	top: 0;
	left: 0;
}
.container2 img {
	position: absolute;
	left: 0;
}
h1 {
	font-size: 10vw;
}