JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <a name="deckform">Response</a>: <input type="text" id="response"/>
    <input type="button" value="Convert" id="convert"/>
</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">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;
}

JavaScript

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

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

$('#convert').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 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 out = '';
    
    out += 'Oracle Card:<br/>\n';
    out += '<img src="' + linkCard + '"><br/><br/>\n';
    
    out += 'Deck:<br/>\n<textarea class="deck">\n';
    out += userDeck;
    out += '</textarea>\n<br/><br/>\n';
    
    out += 'Forum Post:<br/>\n<textarea class="table">\n';
    out += '[table][tr]\n';
    out += '[td][img]' + linkCard + '[/img][/td]\n\n';
    out += '[td][deck]' + userDeck + '[/deck][/td]\n\n';
    out += '[td][table]\n';
    out += '[tr][td][right]Level[/right][/td][td][left]' + level + '[/left][/td][/tr]\n';
    out += '[tr][td][right]Health Points[/right][/td][td][left]' + agedHP(age,hp) + '[/left][/td][/tr]\n';
    out += '[tr][td][right]Max Upgraded[/right][/td][td][left]' + upgraded[up] + '[/left][/td][/tr]\n';
    out += '[tr][td][right]Oracle Upgraded[/right][/td][td][left]' + up +...