JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <a name="deckform">Response</a>: <input type="text" id="response"/>
    <input type="button" value="Generate" id="generate"/>
</p>

<p id="results"></p>

<p class="important">Instructions for getting arena Response data</p>
<ul>
    <li><a href="#chrome">Chrome</a></li>
    <li><a href="#firefox">Firefox</a></li>
</ul>

<p><a name="chrome"><span class="highlight">Chrome</span> (version 31+):</a></p>
<ol>
    <li>Open Elements the Game via one of the following:
        <ul>
            <li><a href="http://elementsthegame.com" target="_blank">Official site for Elements the Game</a></li>
            <li><a href="http://www.kongregate.com/games/zanzarino/elements" target="_blank">Kongregate site for Elements the Game</a></li>
        </ul>
    </li>
    <li>Select the Chrome menu <img src="https://developers.google.com/chrome-developer-tools/images/chrome-menu.png"/> at the top-right of your browser window, then select <span class="emphasize">More Tools > Developer tools</span></li>
    <li>Select the <span class="emphasize">Network</span> tab</li>
    <li>From the <span class="emphasize">Main Menu</span>, open <span class="emphasize">The Arena</span></li>
    <li>Watch for <span class="emphasize">t503.php</span> in the left column, single-click on it</li>
    <li>Select the <span class="emphasize">Response</span> tab</li>
    <li>Triple-click the contents of the <span class="emphasize">Response</span> tab to highlight, and then copy. Paste this into the <a href="#deckform">form above</a>.</li>
</ol>

<p><a name="firefox"><span class="highlight">Firefox</span> (version 25+):</a></p>
<ol>
    <li>Open Elements the Game via one of the following:
        <ul>
            <li><a href="http://elementsthegame.com" target="_blank">Official site for Elements the Game</a></li>
            <li><a href="http://www.kongregate.com/games/zanzarino/elements" target="_blank">Kongregate site for Elements the Game</a></li>
        </ul>
    </li>
    <li>Open <span...

CSS

textarea.deck {
    width: 525px;
    height: 60px;
    font-family: monospace;
    font-size: 12px;
}

textarea.table {
    width: 525px;
    height: 300px;
    font-family: monospace;
    font-size: 12px;
}

span.highlight {
    font-weight: bold;
}

span.emphasize {
    font-style: italic;
}

p.important {
    color: red;
    text-decoration: underline;
}

a.select, a.select:link, a.select:visited {
    color: blue;
    text-decoration: none;
    font-size: 12px;
}

a.select:hover, a.select:active {
    color: purple;
    text-decoration: underline;
}

div.note {
    font-size: 12px;
    color: #333;
    font-style: italic;
    max-width: 525px;
    margin-bottom: 4px;
}

table {
    display: table;
    border-collapse: separate;
    border-color: gray;
    border-spacing: 2px;
    background: #414141;
    font-family: verdana, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.4em;
    color: #cccccc;
}

table td {
    vertical-align: top;
    padding: 5px;
    background: #373737;
    color: #CCC;
}

table.sample table tr td:first-child {
    text-align: right;
    font-weight: bold;
}

a.image {
    margin-top: 6px;
    display: inline-block;
}

.spoiler {
    border: 1px dashed white;
    padding: 10px;
    display: inline-block;
    min-width: 520px;
    background-color: #262626;
}

.preview {
    display: none;
}

JavaScript

$('#response').focus();

$('#response').keydown(function (e){
    if(e.keyCode == 13){
        setTimeout(function(){
            parseResponse($('#response').val());
        }, 4);
    }
});

$('#generate').click(function() {
    parseResponse($('#response').val());
});

function parseCard(x){
    return (parseInt(x,10)+5000).toString(32);
}

function getElement(element) {
    return '8p' + 'ijklmnopqrstu'.charAt(element);
}

function parseDeck(cards,element) {
    if(cards != "" && element !="") {
        var out="";
        for(var i=0;i<cards.length;i+=4){
            out += (parseCard(cards.substr(i,4))) + " ";
        }
        return out + getElement(element);
    }
}

function agedHP(age,hp) {
    var ageVal = Math.pow(2,age);
    if(ageVal == 1) return hp;
    else if(ageVal < hp) return (hp - ageVal) + "/" + hp;
    else return "1/" + hp;
}

function getReward(level) {
         if(level >=  0 && level < 20) return 4;
    else if(level >= 20 && level < 40) return 6;
    else if(level >= 40 && level < 60) return 9;
    else if(level >= 60) return 12;
    else return 0;
}

function parseStats(card,deck,element,level,hp,up,mark,draw,won,lost,money,score,age,rank) {    
    var upgraded = [0, 5, 10, 20, 30, 60];
    var userDeck = parseDeck(deck,element);
    var linkCard = 'http://dek.im/resources/card_images/' + parseCard(card) + '.png';
    
    var reward = getReward(level);
    var thumbsUp = ( money / reward ) - won;
    var thumbsDown = won - ( ( money / reward ) - won );
    
    var out = '';
    
    out += 'Preview: <a class="select togglePreview">[Show/Hide]</a><br/>\n';
    out += '<div class="spoiler"><span class="preview">\n';
    out += '<table class="sample"><tr>\n';
    out += '<td><img src="' + linkCard + '"></td>\n';
    out += '<td><table>\n';
    out += '<tr><td>Level</td><td>' + level + '</td></tr>\n';
    out += '<tr><td>Health&nbsp;Points</td><td>' + agedHP(age,hp) + '</td></tr>\n';
    out += '<tr><td>Max&nbsp;Upgraded</td><td>' +...