JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Incremental Game</title>

	<link rel="stylesheet" type="text/css" href="interface.css" />
	<link href="https://fonts.googleapis.com/css?family=Baloo+Tammudu" rel="stylesheet">
</head>
<body>

<div class="grid-container">

	<div class="grid-item">
		<button id="saveButton" onclick="saveGame()">Save</button>
		<button id="loadButton" onclick="loadGame()">Load</button>
	</div>

	<div class="grid-item">
		<div id="comboSequence"></div>
		<div id="loadingBarWrapper">
			<div id="loadingBarLeft"></div>
			<div id="loadingBarRight"></div>
		</div>
		<div class="comboPointsPopUp">
  			<span class="comboPointsMessage" id="comboPointsMessage">+1000</span>
		</div>
	</div>

	<div class="grid-item">
		<button onclick="get1k()">1,000</button>
		<button onclick="get10k()">10,000</button>
		<button onclick="get100k()">100,000</button>
	</div>

	<div class="grid-item grid-container-left">
		<div>
			<div class="upgrade" id="upgrade0">
				<div class="upgrade-text">
					Upgrade 1 [<span id="amount-upgrade0">0</span>]<br>(CPS: <span id="cps-upgrade0">0</span>)<br>Cost: <span id="cost-upgrade0">0</span>
				</div>
			</div>
		</div>
		<div>
			<div class="upgrade" id="upgrade1">
				<div class="upgrade-text">
					Upgrade 2 [<span id="amount-upgrade1">0</span>]<br>(CPS: <span id="cps-upgrade1">0</span>)<br>Cost: <span id="cost-upgrade1">0</span></div>
				</div>
		</div>
		<div>
			<div class="upgrade" id="upgrade2">
				<div class="upgrade-text">
					Upgrade 3 [<span id="amount-upgrade2">0</span>]<br>(CPS: <span id="cps-upgrade2">0</span>)<br>Cost: <span id="cost-upgrade2">0</span></div>
				</div>
		</div>
		<div>
			<div class="upgrade" id="upgrade3">
				<div class="upgrade-text">
					Upgrade 4 [<span id="amount-upgrade3">0</span>]<br>(CPS: <span id="cps-upgrade3">0</span>)<br>Cost: <span id="cost-upgrade3">0</span></div>
				</div>
		</div>
		<div>
			<div class="upgrade" id="upgrade4">
				<div class="upgrade-text">
					Upgrade 5...

CSS

/*
Background: 222
Text Color: eee
Button Color: 7681b9
Highlight: EC6F28
*/

* {
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    font-family: 'Baloo Tammudu', cursive;
    line-height: 20px;
}

body {
	background: #222;
}

.grid-container {
  display: grid;
  grid-template-columns: 200px 700px 200px;
  grid-template-rows: 100px 600px 50px;
  grid-gap: 0px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.grid-container-center {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.grid-container-left {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 3px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.grid-container-right {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 3px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.grid-container-skills {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.grid-item {
	color: #eee;
  	font-size: 30px;
  	text-align: center;
}

#mainButton {
  background: #dddd22; /*#7681b9;*/
  width: 180px;
  height: 180px;
  padding: 4px 0;
  border: 5px solid #aaaa22;
  border-radius: 100%;
  box-shadow: 0px 0px 50px rgba(200, 200, 100, 0.5);
  transition: box-shadow 1s;
}

#mainButton:hover {
  box-shadow: 0px 0px 100px rgba(200, 200, 100, 1);
}

#combo {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 40px;
}

#loadingBarWrapper{
	width: 400px;
	margin: 0...

JavaScript

var storage = window.localStorage;

var clickPower = 1;
var critRate = 1;
var critDmgMultiplier = 2;

var combo;
var comboReward = 1000;
var comboCounter = 0;
var comboActiveColor = "#EC6F28";
var comboInactiveColor = "#eee";

var comboInterval;
var comboIntervalSpeed = 50;
var loadingBarWidth = 1;

var clicks = 0;
var gameSpeed = 1000;
var gameLoop = setInterval(loop, gameSpeed);

var upgrades = [
	{HTMLamount: document.getElementById("amount-upgrade0"), HTMLcps: document.getElementById("cps-upgrade0"), HTMLcost: document.getElementById("cost-upgrade0"), HTMLid: document.getElementById("upgrade0"), name: "Upgrade 1", amount: 0, multiplier: 1, cps: 1, cost: 10},
	{HTMLamount: document.getElementById("amount-upgrade1"), HTMLcps: document.getElementById("cps-upgrade1"), HTMLcost: document.getElementById("cost-upgrade1"), HTMLid: document.getElementById("upgrade1"), name: "Upgrade 2", amount: 0, multiplier: 2, cps: 1, cost: 100},
	{HTMLamount: document.getElementById("amount-upgrade2"), HTMLcps: document.getElementById("cps-upgrade2"), HTMLcost: document.getElementById("cost-upgrade2"), HTMLid: document.getElementById("upgrade2"), name: "Upgrade 3", amount: 0, multiplier: 3, cps: 1, cost: 1000},
	{HTMLamount: document.getElementById("amount-upgrade3"), HTMLcps: document.getElementById("cps-upgrade3"), HTMLcost: document.getElementById("cost-upgrade3"), HTMLid: document.getElementById("upgrade3"), name: "Upgrade 4", amount: 0, multiplier: 4, cps: 1, cost: 10000},
	{HTMLamount: document.getElementById("amount-upgrade4"), HTMLcps: document.getElementById("cps-upgrade4"), HTMLcost: document.getElementById("cost-upgrade4"), HTMLid: document.getElementById("upgrade4"), name: "Upgrade 5", amount: 0, multiplier: 5, cps: 1, cost: 100000},
	{HTMLamount: document.getElementById("amount-upgrade5"), HTMLcps: document.getElementById("cps-upgrade5"), HTMLcost: document.getElementById("cost-upgrade5"), HTMLid: document.getElementById("upgrade5"), name: "Upgrade 6", amount: 0,...