JSFiddle - React, Tailwind, and code Playground

HTML

<div class="starter container">
     <h1>Please Input Name</h1>

    <input type="text" name="enter-name" id="enter-name" maxlength="18">
    <button id="fight-button">Fight!</button>
</div>
<div class="container hide" id="game-container">
    <div id="dragon">
        <img src="img/dragon.png" alt="http://youtu.be/Wik2uc69WbU">
        <canvas id="dragon-info"></canvas>
    </div>
    <!-- END #DRAGON -->
    <div class="hero">
        <div class="hero-status">
            <img src="img/hero.png" alt="http://youtu.be/Q86Rn4jETVk">
             <h1 class="hero-name">Hero</h1>

            <p class="health">HP: <span class="health">0</span>
            </p>
            <p class="mana">MP: <span class="mana">0</span>
            </p>
        </div>
        <!-- END .HERO-STATUS -->
        <div class="hero-actions">
            <button name="attack">Physical Attack</button>
            <button name="magic">Magic Attack</button>
            <button name="heal">Heal</button>
        </div>
        <!-- END .HERO-ACTIONS -->
    </div>
    <!-- END .HERO -->
    <textarea name="action-log" id="action-log" readonly></textarea>
    <button id="restart" class="hide">Play Again?</button>
</div>
<!-- END .CONTAINER -->
<footer>
    <p><a href="http://opengameart.org/content/rpg-enemies-11-dragons">Dragon : Stephen "Redshrike" Challener, MrBeast, Surt, Blarumyrran, Sharm, Zabin</a>
    </p>
</footer>

CSS

body {
    width: 100%;
    margin: 0 auto;
    background: url(../img/satinweave.png);
    font-family: sans-serif;
}
.container {
    width: 600px;
    margin: 0 auto;
}
h1 {
    font-size: 60px;
    text-align: center;
}
input {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 40px;
    font-size: 35px;
}
.starter button {
    margin: 10px auto;
    width: 100%;
    font-size: 60px;
    background: none;
    border: 1px solid #000;
}
#dragon {
    width: 100%;
    height: auto;
    border: 1px #cccccc solid;
    margin-bottom: 20px;
    margin-top: 20px;
}
#dragon img {
    margin: 0 auto;
    vertical-align: middle;
    display: block;
    padding: 10px;
}
#dragon canvas {
    width: 60%;
    height: 40px;
    margin: 0 auto;
    display: block;
}
.hero {
    position: relative;
}
.hero .hero-status {
    display: inline-block;
}
.hero .hero-status h1 {
    letter-spacing: -1px;
    color: #2c2c2c;
    margin: 0;
    padding: 0;
    display: inline-block;
    overflow: hidden;
    max-width: 150px;
}
.hero .hero-status p {
    margin: 0;
    padding: 0;
}
.hero .hero-status img {
    background: red;
    width: 90px;
    height: 90px;
    float: left;
    margin-right: 10px;
    visibility: hidden;
}
.hero .hero-actions {
    position: absolute;
    right: 0;
    top: 0;
}
.hero .hero-actions button {
    width: 50%;
    height: 30px;
    float: left;
}
.hero .hero-actions button:last-child {
    width: 100%;
}
textarea {
    width: 100%;
    height: 170px;
    max-height: 170px;
    outline: none;
    resize: vertical;
    background: transparent;
}
#restart {
    width: 200px;
    height: 80px;
    border: 1px #C00;
    font-size: 30px;
    margin: 0 auto;
    display: block;
}
footer {
    font-size: 10px;
    position: absolute;
    bottom: 0;
}
footer a {
    color: #666;
    text-decoration: none;
}
footer a:hover {
    color: black;
}
.hide {
    display: none;
    visibility: hidden;
}

JavaScript

"use strict";
// Player variables
var playerHealth;
var playerMaxHealth;
var playerMana;
var playerMaxMana;
var playerDamage;
var playerMAttackCost;
var playerHealCost;
var playerName;
var displayTurn;

// Player display variables
var playerContainer;
var playerNameDisplay;
var playerHpDisplay;
var playerManaDisplay;

// Enemy Variables
var dragonHealth;
var dragonMaxHealth;
var dragonDamage;
var healthBar;

// Game variables
var curTurn; // The current turn
var actions; // List of actions
var actionLogDisplay; // Action log textarea on page
var starter; // The start of page
var btnRestart;
var gameContainer; // Game div
var dragonCanvas; // Dragon canvas ELEMENT
var dragonCanvasContext; // Dragon canvas DRAW CONTEXT
var playing; // See if game is playing

// Initilizes the variables and starts the game
function init(newGame) {

    curTurn = Math.round(Math.random());
    displayTurn = true;
    playerHealth = playerMaxHealth = 550;
    playerMana = playerMaxMana = 60;
    dragonHealth = dragonMaxHealth = 1400;
    if (newGame) {
        definePageElements();
        buttonEvents();
        playerDamage = 1;
        playerMAttackCost = 10;
        playerHealCost = 20;
        dragonDamage = 10;
        healthBar = {
            x: 20,
            y: 10,
            width: 300,
            height: 40
        };
        playerName = "";
    }
    updateCanvas();
    updateDisplay();
}

function updateCanvas() {
    dragonCanvasContext.clearRect(0, 0, dragonCanvas.width, dragonCanvas.height);
    if (dragonHealth <= 0) return;
    dragonCanvasContext.fillStyle = "rgb(200,0,0)";
    dragonCanvasContext.fillRect(healthBar.x, healthBar.y,
    dragonHealth / dragonMaxHealth * healthBar.width, healthBar.height);
}

// Defines all the page elements such as health span
function definePageElements() {
    playerContainer = document.getElementsByClassName("hero")[0];
    var temp = playerContainer.getElementsByTagName("span");
    for (var i = 0; i < temp.length; i++) {
   ...