JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>

  <head>
    <link href='styles.css' rel='stylesheet'>
    <script src='index.js' type='text/javascript'></script>
</head>

<body>
    <div class='clickContainer'>
        <div class='clickBtn' id='clickBtn' onclick='addMoney()'>
            💰
        </div>
        <span class='text' id='money'>0$</span>
            <p id='text' class='text' style='font-style:italic;font-family:sans-seriff;top:56%;left:49%;'>
        "You are broke."
    </p>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav('')">&times;</a>
        <span style='padding:0px;top:10px;left:8px;position:absolute;font-size:25px;'>Stats</span>
        <div class='break' style='background-color:white;top:25px;'></div>
        <span id='clickers'>Clickers: 0</span>
        <span id='clickerss'>Clickers: 5</span>
        <span id='clickersss'>Clickers: 5</span>
        <span id='clickerssss'>Clickers: 5</span>
    </div>
    <div id="mySidenav2" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav('2')">&times;</a>
        <span style='padding:0px;top:10px;left:8px;position:absolute;font-size:25px;'>Shop</span>
        <div class='break' style='background-color:white;top:25px;'></div>
        <span onclick='upgrade()' id='clickersCost' class='upgrade' style='cursor:pointer;'>Upgrade Clicker: 5$</span>
        <span onclick='upgrade()' class='upgrade' style='cursor:pointer;'>Upgrade Clicker</span>
    </div>
    <div class='blur' id='blur'>
        <div class='menu' id='settings'>
            <h1>
                Menu <span style='right:10px;position:absolute;cursor:pointer;' onclick='closeSettings()'>X</span>
            </h1>
            <div class='break'>
            </div>
            <div class='icon tooltip' onclick='openMenu("achievements")'>
                🏆<span class="tooltiptext"...

CSS

div::-webkit-scrollbar {
    width: 0 !important
}

body {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    overflow: hidden;
}

button {
    cursor: pointer;
}

.clickBtn {
    transition: all 0.1s ease;
    cursor: pointer;
    position: absolute;
    z-index: 0;
    top: 45%;
    left: 45%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 0px;
    font-size: 75px;
    background-color: lightGray;
    color: gray;
}

.clickBtn:hover {
    background-color: gray;
    color: lightGray;
}

.clickBtn:active {
    font-size: 65px;
}

.clickContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 0;
    margin: 0;
}

.clickContainer .text {
    text-align:center;
    position: absolute;
    top: 35%;
    left: 48%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: rgb(30, 30, 30)
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav span {
    top: 35px;
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    position: relative;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    padding: 0;
    top: 5px;
    text-decoration: none;
    color: #818181;
    display: block;
    transition: 0.3s;
    position: absolute;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

.break {
    position: relative;
    background-color: black;
    width: 100%;
    height: 1px;
}

.menu {
    z-index: 0;
   ...

JavaScript

var money = 0;
var clickers = 0;

var upgradeCost = 5;

var achOn = true;
var navOn = false;

var comments = [
  ["You are broke.", 0],
  ["You have started making money.", 1],
  ["You have made your first 10 bucks, or day's meal.", 10],
  ["You are extremely poor.", 50],
  ["You are poor.", 100],
  ["You have very little money, and no way of sustaining yourself.", 500],
  ["You have quickly earned a lot of money, but you are still underpaid.", 1e3],
  ["You are able to afford an apartment.", 3e3],
  ["You are known for your rapid growth in wealth, however you still are lower-class.", 5e3],
  ["You are able to sustain yourself well.", 1e4],
  ["You can live comfortably in an apartment. You no longer have to struggle everyday to get by.", 25e3],
  ["With assistence from the bank, you are able to afford a house.", 3e4],
  ["You are just under the average pay in America.", 5e4],
  ["You make the average pay in America, enough to get you a small house with no help.", 6e4],
  ["You make a lot of money, and can afford a house for yourself, along with a small car.", 8e4],
  ["You make enough to afford a nice car, and a house for your family", 1e5],
  ["You have enough to buy a large house for your family", 13e4],
  ["You are extremely well paid, you can now afford a big house and nice car. People start looking up to you!", 16e4],
  ["You are officialy wealthy, with double the income needed for comfortable living.", 2e5],
];

var achievements = [
  [money >= 1, 'locked', 'Become un-broke'],
  [clickers > 0, 'locked', 'Earn more income'],
  [money >= 10, 'locked', 'Make enough to buy a meal'],
  [money >= 50, 'locked', 'Earn 50$ in total'],
  [money >= 100, 'locked', 'Make in the triple digits'],
  [money >= 1e3, 'locked', 'Now were talking'],
  [money >= 3e3, 'locked', 'Be able to afford an apartment'],
  [money >= 5e3, 'locked', 'Become known by your neighbors'],
]

function updateValues() {
    document.getElementById('money').innerHTML = money + '$';
   ...