JSFiddle - React, Tailwind, and code Playground

by dusset

HTML

<div id="flash"></div>
<div id="shadow"></div>
<h3 id="ding"></h3>
<h1>Welcome to Prizuccino</h1> (Unimplemented features - achievements, Prizie quotes, several items functionality, ...) 
<h1 id="experience"></h1>
<h1 id="level"></h1>
<p id="roll"></p>
<p id="day"></p>
<p id="result" style="color:red;"></p>
<p id="charges">Charges: </p>
<button id="trigger">TRIGGER!</button>
<br>
<button id="magicvial"></button>
<button id="lessermagicvial"></button>
<button id="lesseremptyvial"></button>
<button id="lesserwisdom"></button>
<button id="greaterwisdom"></button>
<button id="hathrian">Hathrian's Cube 1</button>
<button id="damagedhc"></button>
<button id="empoweredhc"></button>
<button id="boxlesserprizes"></button>
<button id="pristine"></button>
<button id="wind"></button>
<button id="esoe"></button>

<br><br>
<p>Items disabled in demo</p>
<button id="emptyvial"></button>
<button id="flame"></button>
<button id="hourglass"></button>
<button id="speculation"></button>
<button id="fate"></button>
<button id="enchantedfate"></button>

<br><br><br>
<button id="RESET">RESET</button>
<button id="simulate">Simulate</button>
<button id="1000sim">1000xSim</button>
<br><br>
<h1>STATS</h1>
<p id="stats_triggers"></p>
<p id="stats_mvuses"></p>
<p id="stats_wins0"></p>
<p id="stats_winsA"></p>
<p id="stats_winsB"></p>
<p id="stats_winsC"></p>
<p id="stats_winsD"></p>
<p id="stats_winsE"></p>
<p id="stats_winsF"></p>
<p id="stats_winsG"></p>
<p id="stats_soefproc"></p>
<p id="stats_sopwproc"></p>
<p id="stats_sonwproc"></p>
<h1>STATS - Shard of Pristine Waters</h1>
<p id="stats_sopw_dhc"></p>
<p id="stats_sopw_lmv"></p>
<p id="stats_sopw_gsow"></p>
<p id="stats_sopw_lsow"></p>
<p id="stats_sopw_lev"></p>
<p id="stats_sopw_mv"></p>
<h1>STATS - Box of Lesser Prizes</h1>
<p id="stats_bolp_lsow"></p>
<p id="stats_bolp_lmv"></p>
<p id="stats_bolp_gsow"></p>
<p id="stats_bolp_pos"></p>
<p id="stats_bolp_pof"></p>
<p id="stats_bolp_epof"></p>
<p...

CSS

h1 {font-size:30px;}

body { font-size:22px;}

button {font-size:22px;}

#flash { width: 100%; height: 100%; position:absolute; top:0; left:0; z-index:100; background:#ff0000; }
#shadow { width:150px; height:1px; background:#222; box-shadow:0 0 120px 70px #000; position:absolute; top:50%; left:50%; margin-left:-80px; margin-top:-20px;border-radius:100px;z-index:120;  }
h3 { font-size:80px; color:#00ff00; position:absolute; top:40%; left:50%; margin-left:-120px;z-index:200;}

td {padding:5px; font-size:12px; width:42px; font-family:Tahoma}
tr {border-bottom:3px solid blue;}
td.border { border-right: 2px solid black;}
tr:nth-child(even) {
    background-color: #000000;
}

JavaScript

//RESET CHEAT
function resetP3ie() {
    if (SoNWused > 0) {
        charges = 2;
        SoNWused -= 1;
    } else {
        charges = 1;
    };
    document.getElementById("charges").innerHTML = "Charges: " + charges;    
    if (ESoEcooldown > 0) {
        ESoEcooldown -= 1;
        document.getElementById("esoe").innerHTML = "Eternal Shard of Elements " + ESoEamount + " Cooldown: " + ESoEcooldown + "days";
    };
    day += 1;
    document.getElementById("day").innerHTML ="Day: " + day;
    log.innerHTML += "<br /><hr />New day;"; //LOG
};

document.getElementById("RESET").onclick = resetP3ie;

//RESET DAY, TRIGGER ON KEYPRESS: "R", "T"
$(window).keyup(function(e) {
   if(e.keyCode == 82) {
     resetP3ie();
   } else if(e.keyCode == 84) {
       triggerP3ie();
   };
 });
//END KEYPRESS
//END RESET CHEAT

var charges = 1;
    
    
//TRIGGER
function triggerP3ie() {
    if (charges >= 1) {
        rollTrigger();
        addExp(100);
        charges -= 1;
        document.getElementById("charges").innerHTML = "Charges: " + charges;
        //STATS
        statsTriggers += 1;
        document.getElementById("stats_triggers").innerHTML = "Triggers: " + statsTriggers;
    } else {
        alert("Not enough charges.");
    };
};

document.getElementById("charges").innerHTML = "Charges: " + charges;
document.getElementById("trigger").onclick = triggerP3ie;
    
    
function rollTrigger() {
    var roll = Math.round(Math.random()*999999999+1);
    var result = document.getElementById("result");
    
    if (roll <= 15574) {
        var categoryRoll = Math.round(Math.random()*2+1);
        if (categoryRoll == 1) {
            result.innerHTML = "Category G - Prize 1";
            log.innerHTML += "<br />Trigger - win = true; Category G - Prize 1"; //LOG
        } else if (categoryRoll == 2) {
            result.innerHTML = "Category G - Prize 2";
            log.innerHTML += "<br />Trigger - win = true; Category G - Prize 2"; //LOG     
        } else {
           ...