JSFiddle - React, Tailwind, and code Playground

HTML

<section class="game" id="share">

	<div class="container">

		<div class="columns twelve borders center">
			
			<div class="game-container">
				
				<div class="container">
					
					<div class="SplashScreen">
						<h1>
							Snake
						</h1>
						<h2>
							Click To Start.
						</h2>
						<input class="StartButton" type="button" value="Start" />
					</div>
					
					<div class="FinishScreen" style="display:none">
						<h1>
							Game Over
						</h1>
						<p>
							Your score was: <span id="score"></span>
						</p>
						<input class="StartButton" type="button" value="Restart" />
					</div>
					
					<canvas id="canvasArea" height="300" width="300" style="display:none;"></canvas>
					
			
				
				
			</div>
			
		</div>

	</div>

</section>

CSS

/**************************************************
	GAME
**************************************************/
section.game {
	padding: 40px 0px;
}

.SplashScreen, 
.FinishScreen {
	margin: 0 auto;
	text-align:center;
	width: 300px;
	height: 300px;
	border: 2px solid #fff;
	background-color:#0056a0;
}

.FinishScreen h1,
.SplashScreen h1 {
	color: #fff200;
	font-family: 'Oswald', sans-serif;
	font-size: 36px;
	font-weight: 700;
	margin: 0px 0px 10px;
	padding: 50px 0px 0px;
	text-align: center;
	text-transform: uppercase;
}

.FinishScreen p {
	color: #fff;
	font-weight: bold;
}

.FinishScreen h2,
.SplashScreen h2 {
	color: #ffffff;
	font-family: 'Oswald', sans-serif;
	font-size: 28px;
	font-weight: 700;
	margin: 0px 0px 25px;
	text-align: center;
}

canvas {
	border: 2px solid #fff;
	display: block;
	margin: 0 auto;
}

#gamecontainer {
	border: 2px solid #fff;
	margin: 0 auto;
}

.gamelayer {
	position:absolute;
	display:none;
}

input.StartButton {
	color: #fff200;
	font-size: 16px;
	display: block;
	width: 200px;
	height: 40px;
	background-color: #0056a1;
	border: 2px solid #fff200;
	text-align: center;
	margin: 0 auto;
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}

input.StartButton:hover {
	color: #0056a1;
	font-size: 16px;
	display: block;
	width: 200px;
	height: 40px;
	background-color: #fff;
	border: 2px solid #0056a1;
}

input.StartButton:focus {
	outline-color: transparent;
	outline-style: none;
}

.button-pad {
	margin:50px 0px 0px 225px;
	position: relative;
}

.button-pad button {
	background-color:transparent; 
	border-color:transparent;
	height: 50px;
	width: 50px;
}

.button-pad .btn-up {
	position: relative;
	top: 0px;
}

.button-pad .btn-right {
	position: relative;
	right: -40px;
	top: -10px;
}

.button-pad .btn-down {
	position: relative;
	top: -20px;
}

.button-pad .btn-left {
	position: relative;
	left: -40px;
	top:...

JavaScript

( function( $ ) {

	$( function() {
	
		$(document).ready(function () {

			$(".StartButton").click(function () {
			    $(".SplashScreen").hide();
			    $(".FinishScreen").hide();
			    $("#canvasArea").show();
			    init();
			});
			
			//Canvas stuff
			var canvas = $("#canvasArea")[0];
			var ctx = canvas.getContext("2d");
			var w = $("#canvasArea").width();
			var h = $("#canvasArea").height();
			
			//Lets save the cell width in a variable for easy control
			var sw = 10;
			var direction;
			var nd;
			var food;
			var score;
			
			//Lets create the snake now
			var snake_array; //an array of cells to make up the snake
			
			function endGame() {
			    $("#canvasArea").hide();
			    $("#score").text(score);
			    $(".FinishScreen").show();
			}
			
			function init() {
			    direction = "right"; //default direction
			    nd = [];
			    create_snake();
			    create_food(); //Now we can see the food particle
			    //finally lets display the score
			    score = 0;
			
			    //Lets move the snake now using a timer which will trigger the paint function
			    //every 60ms
			    if (typeof game_loop != "undefined") clearInterval(game_loop);
			    game_loop = setInterval(paint, 60);
			}
			
			function create_snake() {
			    var length = 5; //Length of the snake
			    snake_array = []; //Empty array to start with
			    for (var i = length - 1; i >= 0; i--) {
			        //This will create a horizontal snake starting from the top left
			        snake_array.push({
			            x: i,
			            y: 0
			        });
			    }
			}
			
			//Lets create the food now
			function create_food() {
			    food = {
			        x: Math.round(Math.random() * (w - sw) / sw),
			        y: Math.round(Math.random() * (h - sw) / sw),


			    };
			    //This will create a cell with x/y between 0-44
			    //Because there are 45(450/10) positions accross the rows and columns
			    			    
			}
			
			//Lets paint the snake now
			function paint() {
			  ...