JSFiddle - React, Tailwind, and code Playground

by Manawe

HTML

<div id="petHelperHolder">
    <div class="petMenu">
        <button class="close">Close</button>
        <button class="close">Options</button>
    </div>
    <div id="petPair0" class="pair">
        <div id="pet0" class="pet">
            <div class="petPic"></div>
            <div class="barHolder">
                <div class="hunger"></div>
                <div class="happiness"></div>
                <div class="barTextHolder">Hunger
                    <br/>Happiness</div>
            </div>
            <button class="breed">Breed</button>
            <button class="feed">Feed</button>
        </div>
        <div id="pet1" class="pet">
            <div class="petPic"></div>
            <div class="barHolder">
                <div class="hunger"></div>
                <div class="happiness"></div>
                <div class="barTextHolder">Hunger
                    <br/>Happiness</div>
            </div>
            <button class="breed">Breed</button>
            <button class="feed">Feed</button>
        </div>
    </div>
    <div id="petPair1" class="pair">
        <div id="pet2" class="pet">
            <div class="petPic"></div>
            <div class="barHolder">
                <div class="hunger"></div>
                <div class="happiness"></div>
                <div class="barTextHolder">Hunger
                    <br/>Happiness</div>
            </div>
            <button class="breed">Breed</button>
            <button class="feed">Feed</button>
        </div>
        <div id="pet3" class="pet">
            <div class="petPic"></div>
            <div class="barHolder">
                <div class="hunger"></div>
                <div class="happiness"></div>
                <div class="barTextHolder">Hunger
                    <br/>Happiness</div>
            </div>
            <button class="breed">Breed</button>
            <button class="feed">Feed</button>
        </div>
    </div>
    <div id="petPair2" class="pair">
        <div id="pet4"...

CSS

#petHelperHolder {
    text-shadow: 4px 2px 6px #2B3336;
    position:relative;
    color: #F2F2F2;
    width: 520px;
    min-height: 200px;
    max-height: 500px;
    height: auto;
    margin: auto;
    background: #1d1f20;
    border-style: solid;
    border-color: #2B3336;
    z-index: 11111111;
    position: relative;
    overflow: auto;
}
.pair {
    overflow: auto;
    width:498px;
    margin: auto;
    margin-top: 2px;
    margin-bottom: 10px;
    background: #3d3d3d;
    display: box;
}
.pet {
    background: #1d1f20;
    text-align: center;
    position: relative;
    border: 1px solid #3d3d3d;
    float : left;
    margin-top: 4px;
    margin-bottom: 4px;
    height:34px;
    width: 49%;
    vertical-align: middle;
    margin-left: 2px;
}
.petPic {
    background: #3d3d3d;
    border-right: 1px solid #3d3d3d;
    height: 34px;
    width: 34px;
    position: absolute;
    background-image: url("https://1239889624.rsc.cdn77.org/sheet/pets.gif?ce81f547b81fccfc0f93525b0cb36bd5rpg.mo.ee");
    background-position: -416px -32px;
}
.barHolder {
    position: absolute;
    border: none;
    height: 34px;
    width: 60.5%;
    margin-left: 34px;
    border-right: 1px solid #3d3d3d;
}
.hunger {
    background: rgb(191, 76, 76);
    height:17px;
    width:10%;
}
.happiness {
    background: #019249;
    height: 17px;
    width: 100%;
}
.breed {
    position: absolute;
    left: 75%;
    color: #F2F2F2;
    border: none;
    background: #222;
    height: 17px;
    width: 25%;
}
.feed {
    position: absolute;
    top: 17px;
    left: 75%;
    color: #F2F2F2;
    border: none;
    background: #222;
    height: 17px;
    width: 25%;
}
.breed:hover {
    background: #3d3d3d;
}
.petMenu {
    width: 100%;
    height: 16px;
    background: #1d1f20;
}
.close {
    color: #F2F2F2;
    float: right;
    position: static;
    border: none;
    background: #1d1f20;
    height: 16px;
    width: 15%;
    font-size: 12px;
}
button:hover {
    background:...

JavaScript

//once we have pet id and his hunger, display it.
//used to import css

var link = document.createElement("link");
link.href = "https://dl.dropboxusercontent.com/s/g3whgvpq4i47ghz/petMod.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

//DOM. Used http://www.html2dom.com/ to convert the holder I did in html to DOM.
javascript: (function () {
    document.body.appendChild(document.createElement('script')).src = 'https://dl.dropboxusercontent.com/s/9t65gxpull9pnjm/petHelperDOMElements.js';
})();


//Close window

html2dom_root_1_div_2_div_2_button.onclick = function () {
    html2dom_root_1_div.style.zIndex = 0;
};


//make menu entry
document.getElementById('wrapper').appendChild(html2dom_root)

breedingMenuOption = document.createElement("div");
document.getElementById('settings').appendChild(breedingMenuOption);
breedingMenuOption.textContent = "Breeding Menu"
breedingMenuOption.setAttribute("class", "wide_link scrolling_allowed");
breedingMenuOption.onclick = function () {
    html2dom_root_1_div.style.zIndex = 11111111111111111;
};

//Press key ` (besides 1) to open, escape to close
document.addEventListener("keyup", function (evt) {
    if (evt.keyCode == 223) {
        html2dom_root_1_div.style.zIndex = 11111111111111111;
    }
}, false);
document.addEventListener("keyup", function (evt) {
    if (evt.keyCode == 27) {
        html2dom_root_1_div.style.zIndex = 0;
    }
}, false);
//returns pet hunger. The parameters taken are a = on_map[300][x][y]

var petHungerCheck = function (a) {
    var d = 100;
    if ("undefined" == typeof iamserver) {
        var e = on_map[300][a.i][a.j];
        if (!e || !e.params) return d;
        var f = e.params.pet_id,
            e = e.params.last_ate;
    } else return 100;
    pets[f] && (d = pets[f].params.eat_interval, d = Math.floor(secondsPastDelta(e) / (60 * d) * 100));
    return Math.range(d, 0, 100)
};
var petPairs = [];
for (var i in...