JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<body>
    <input type="hidden" id="load_id" value="">
    <div id="content-container" class="unselectable">
        	<h1>My Character</h1>

        <div id="id-display"><span id="id-text" class="selectable"></span>
            <br/>
            <button id="toggle-id">Toggle ID</button>
        </div>
        <img src="http://coopgamemaking.com/images/c0ydqZL.png" alt="Character Image" id="character-image">
        <!-- 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>
            <div id="health-bar">
                <p id="health-text"><span id="health"></span>/<span class="max-health"></span>
                </p>	<span id="health-remaining"></span>

            </div>
            <!-- Available Stat Points -->
            <div id="stat-s" class="stat">	<b>Available Stat Points: <span id="stat-points"></span></b>

            </div>
            <!-- HEALTH -->
            <div id="health-s" class="stat">
                <p class="float-left">Health: <span class="max-health"></span>
                </p>	<span id="health-add" data-stat="health" class="add-stat">+10</span>

            </div>
            <!-- STRENGTH -->
            <div id="strength-s" class="stat">
                <p class="float-left">Strength: <span id="strength"></span>
                </p>	<span id="strength-add" data-stat="strength" class="add-stat">+1</span>

            </div>
            <!-- INTELLECT -->
            <div id="intellect-s" class="stat">
                <p class="float-left">Intellect: <span id="intellect"></span>
                </p>	<span id="intellect-add" data-stat="intellect" class="add-stat">+1</span>

            </div>
            <!-- DEXTERITY -->
            <div id="dexterity-s" class="stat">
                <p class="float-left">Dexterity: <span id="dexterity"></span>
      ...

CSS

html {
    font-family:'Roboto Condensed', sans-serif;
}
/* Stats Container */
 #stats-container {
    width:200px;
    border:1px solid #000;
    margin:auto;
}
#stats-container .float-left {
    float:left;
    margin:0;
    padding:5px;
}
/* Some spacing */
 .stat {
    padding: 5px;
    clear:both;
}
/* Hiding add stat button */
 .add-stat {
    background:#CD5C5C;
    width:30px;
    padding: 5px;
    cursor: pointer;
    float:right;
    margin:0;
    color:#fff;
    transition:background .5s;
    -webkit-transition:background .5s;
    -moz-transition:background .5s;
}
.add-stat.purchase {
    background:#2E8B57;
}
/*Menu text no selectable*/
 .unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.selectable {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
/* Centering content to the page */
 #content-container {
    text-align: center;
}
h1 {
    margin-bottom: 0;
    padding-bottom: 0;
}
#id-display {
    display: none;
}
#toggle-id {
    margin-bottom: 10px;
}
/* Health Bar */
 #health-bar {
    position:relative;
    background: hsla(0, 92%, 41%, 1.00);
    height: 20px;
    width: 100%;
    z-index: 0;
    padding: 0;
    text-align: center;
}
#health-text {
    top:-16px;
    color:#fff;
    z-index: 2;
    position: absolute;
    text-align: center;
    width: 100%;
    display: block;
}
#health-remaining {
    position:absolute;
    left:0;
    background: hsla(121, 100%, 31%, 1.00);
    height: 20px;
    width: 100%;
    display: block;
    z-index: 1;
}
/* Button */
 #footerContent {
    position: fixed;
    bottom: 10px;
    width: 100%;
}
#buttons {
    width: 100%;
}
.bottom_buttons {
    float: left;
    margin-right: 0.5em;
}
#load-box {
    display: none;
}
#information {
   ...

JavaScript

(function () {

    var Game = window.Game = window.Game || {};

    /**
     * A Character
     * @struct
     * @param {Character=} obj
     * @return {Character}
     */
    Game.Character = function (obj) {

        return {
            health: /** {number} */
            (!obj || !obj.health) ? 100 : obj.health,
            max_health: /** {number} */
            (!obj || !obj.health) ? 100 : obj.max_health,
            strength: /** {number} */
            (!obj || !obj.strength) ? 1 : obj.strength,
            intellect: /** {number} */
            (!obj || !obj.intellect) ? 1 : obj.intellect,
            dexterity: /** {number} */
            (!obj || !obj.dexterity) ? 1 : obj.dexterity,
            level: /** {number} */
            (!obj || !obj.level) ? 1 : obj.level,
            experience: /** {number} */
            (!obj || !obj.experience) ? 0 : obj.experience,
            experience_tnl: /** {number} */
            (!obj || !obj.experience_tnl) ? 50 : obj.experience_tnl,
            stat_points: /** {number} */
            (!obj || !obj.stat_points) ? 0 : obj.stat_points,
            max_stat_points: /** {number} */
            (!obj || !obj.max_stat_points) ? 0 : obj.max_stat_points,
            can_level_stats: /** {boolean} */
            (!obj || !obj.can_level_stats) ? false : obj.can_level_stats
        };

    };


    // Gets the exp until next level based on advanced algorithm
    Game.Character.get_experience_tnl = function (character) {

        //Random algorithm that doesn't make sense at all
        return (Math.pow((character.level * 10), 2));

    };


    // Checks if stats can be upgraded
    Game.Character.check_can_level_stats = function (character) {

        if (character.stat_points > 0 && character.stat_points <= character.max_stat_points) {

            character.can_level_stats = true;

        } else if (character.stat_points === 0 || character.stat_points > character.max_stat_points) {

           ...