JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
  <div id='player'>robwayyyne
    <div id='pcont'>
      <label for="name">Name:</label>
      <p id='name'></p>
      <br/>
      <label for="hp">Health:</label>
      <p id='hp'></p>
      <br/>
      <label for="ep">Energy:</label>
      <p id='ep'></p>
      <br/>
      <label for="lvl">Level:</label>
      <p id='lvl'></p>
      <br/>
      <br/>
      <button id='explore'>Explore</button>
      <button id='rest'>Rest</button>
      <button id='run'>Run</button>
      <button id='attack'>Attack</button>
      <button id='quit'>Quit</button>
    </div>
  </div>
  <div id='enemy'>
    <div id="econt">
      <label for="ename">Name:</label>
      <p id='ename'></p>
      <br/>
      <label for="ehp">Health:</label>
      <p id='ehp'></p>
      <br/>
    </div>
  </div>
</div>

CSS

#html,
body {
  margin: 0%;
  padding: 0%;
  width: 100%;
  height: Window.innerHeight;
  min-height: 100%;
  min-width: 600px;
  max-width: 2000px;
  font-family: 'Roboto', sans-serif;
}

p {
  display: inline-block;
}

#player,
#enemy {
  width: 49.5%;
  height: 50%;
  border: 1px solid black;
  position: relative;
  float: left;
}

#pcont,
#econt {
  position: absolute;
  top: 0.5%;
  left: 0.5%;
  width: 100%;
  height: 100%;
  line-height: 0.5em;
}

#container {
  border: solid black;
  height: 50%;
}

#state {
  top: 1%;
  left: 1%;
}

JavaScript

//Character constructor where the player and enemies will receive their //attributes from.n
function Character(name, health, max_health) {
  this.name = name;
  this.health = health;
  this.max_health = max_health;
  this.do_dmg = do_dmg;

  //calculates amount of damage done by by finding the 
  // lower number between a (rand int from 0 to personal health - a rand int from 0 to enemy health) and
  function do_dmg(enemy) {
    var m = Math;
    var randDmg = m.round(m.random() * this.health) - m.round(m.random() * enemy.health);
    if (randDmg < 0) randDmg = 0;
    var dmg = m.min(randDmg, enemy.health);
    $('#hp').text(this.health);
    $('#ehp').text(enemy.health -= dmg);
    if (dmg === 0) {
      console.log(this.name + " evades " + enemy.name + "'s attack!");
    } else {
      console.log(this.name + " hurts " + enemy.name + " for " + dmg);
      return enemy.health <= 0;
    }
  }
}

// A hero is a Character + a few properties
function Hero(name, health, max_health) {
  //
  Character.apply(this, arguments);
  //
  this.state = "normal";
  this.awoken = Math.round(Math.random());
  this.energy = 19;
  this.max_energy = 19;
  
  this.XP = 0;
  this.level = 1;
  this.nextLevel = this.level + 1;
}

// --------------------------------------

$(document).ready(function() {
  var m = Math;

  //Create Enemies HERE
  var Goblin = new Character("Goblin", randInt(1, 10), 25);
  var Demon = new Character("Demon", randInt(1, 11), 50);
  var Dragon = new Character("Dragon", randInt(1, 12), 100);
  //Load created enemies into an Array	
  var Enemies = [Goblin, Dragon, Demon];

  //Create the Player.
  var Player = new Hero("Ryan", 10, 10);
  var p = Player;

  p.quit = function() {
      console.log(this.name + " has quit.");
    },
    p.tired = function() {
      this.energy -= 1;
      $('#ep').text(this.energy);
      if (this.energy == 5) {
        console.log(this.name + ' is getting tired.');
      } else if (this.energy == 2) {
        console.log(this.name...