JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<!-- Google Analytics -->
<script>
    (function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function() {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-62640417-1', 'auto');
    ga('send', 'pageview');
</script>
<body>
    <input type="hidden" id="load_id" value="">
    <div id="advert">
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- GameMaking --> <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-9866343712140984" data-ad-slot="2535597386"></ins>

        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
    <div id="content-container">
        	<h1>My Character</h1>

        <div id="id-display"><span id="id-text"></span>
            <br/>
            <button id="toggle-id">Toggle ID</button>
        </div>
        <!-- Where stats are shown to the player -->
        <div id="stats_container">
            <!-- LEVEL -->
            <div id="level_s" class="stat">
                	<h2>LvL <span id="level"></span></h2>

            </div>
            <!-- HEALTH -->
            <div id="health_s" class="stat">Health: <span id="health">460</span>  <span id="health_add" class="add_stat">+</span>

            </div>
            <!-- STRENGTH -->
            <div id="strength_s" class="stat">Strength: <span id="strength"></span>
 <span id="strength_add" class="add_stat">+</span>

            </div>
            <!-- INTELLECT -->
            <div id="intellect_s" class="stat">Intellect: <span id="intellect"></span>
 <span id="intellect_add"...

CSS

html {
    font-family:'Roboto Condensed', sans-serif;
}
/* Some spacing */
 .stat {
    padding: 5px;
}
/* Hiding add stat button */
 .add_stat {
    display: none;
    padding: 5px;
    cursor: pointer;
}
/* Centering content to the page */
 #content-container {
    text-align: center;
}
h1 {
    margin-bottom: 0;
    padding-bottom: 0;
}
#id-display {
    display: none;
}
/* Button */
 #save-button {
    position: absolute;
    bottom: 10px;
    left: 10px;
}
#load-button {
    position: absolute;
    bottom: 10px;
    left: 100px;
}
#load-box {
    position: absolute;
    left: 190px;
    bottom: 10px;
    display: none;
}
/* Information */
 #information {
    position: absolute;
    right: 10px;
    bottom: 5px;
}
/* Bump up div when screen size forces overlap with save/load buttons */
 @media only screen and (max-width: 800px) {
    #information {
        bottom: 25px;
    }
}
/* Advert */
 #advert {
    width: 728px;
    margin: 0 auto;
}

JavaScript

/* Creating global Vars */

// Stats 
var health = 100;
var strength = 1;
var intellect = 1;
var dexterity = 1;
// Level control
var level = 1;
var experience = 0;
var experience_tnl = 50;
var stat_points = 0;
var max_stat_points = 0;
var can_level_stats = false;

// Time
var game_time = 250;
var prev_time = new Date();
var passed_time = 0;

/* Updating variables on page when the document loads */
$(document).ready(function (e) {

    // Initiate stats on screen
    update_stats();

    // Game Loop
    var game_tick = setInterval(function () {

        // Ensures that the game still functions when the tab is closed
        var current_time = new Date();
        var time_difference = (current_time.getTime() - prev_time.getTime());

        // Calculates the difference in time and returns multiplier
        if (time_difference > game_time) {
            if (Math.floor(time_difference / game_time > 1)) {
                passed_time = Math.floor(time_difference / game_time)
            } else {
                passed_time = 1;
            }
        } else {
            passed_time = 1;
        }
        prev_time = new Date();
        update_game(passed_time);

    }, game_time);

});

var update_stats = function () {

    // Updating stats
    $("#level").html(level);
    $("#health").html(health);
    $("#strength").html(strength);
    $("#intellect").html(intellect);
    $("#dexterity").html(dexterity);
    $("#exp").html(experience);
    $("#exp_tnl").html(experience_tnl);

};

var update_game = function (passed_time) {

    // Adds exp each game tick
    experience += 10 * passed_time;
    if (experience > experience_tnl) {
        experience -= experience_tnl;
        experience_tnl = get_experience_tnl();
        level += 1;
        stat_points += 2;
        max_stat_points += 2;
    }

    // Updates stats on the screen
    update_stats();

    // Checks if stats can be upgraded
    check_stat_points();

};

// Gets the exp until next level based on advanced...