JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<form>
  <div id="container">
  <table id="numberpad">
  <tr>
    <td>
      <input type="text" id="realtxt" style="width:116px" onkeyup="javascript:searchSel();"/>
    </td>
    <td colspan="2">
      <input type="text" style="width:40px" id="attrName1" disabled/>
    </td>
    <td colspan="2">
      <input type="text" style="width:40px" id="attrValue1" disabled/> 
    </td>
    <td></td>
    <td colspan="2">
      <input type="text" style="width:40px" id="attrName2" disabled/>
    </td>
    <td colspan="2">
      <input type="text" style="width:40px" id="attrValue2" disabled/> 
    </td>
    <td></td>
    <td colspan="2">
      <input type="text" style="width:40px" id="attrName3" disabled/>
    </td>
    <td colspan="2">
      <input type="text" style="width:40px" id="attrValue3" disabled/> 
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <select id='realitems' style='width:120px' disabled>
      </select>
    </td>
    <td colspan="15"><div id="result" style="background:gray;text-align:center;vertical-align:middle;line-height:20px;height:20px"></div></td>
  </tr>
  </table>
  </div>
</form>
<pre id=debug></pre>

CSS

.button {
    background-color: #7db9e8;
    border: solid 1px #1E5799;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: inset 0 0 1px #fff;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: bold 14px/18px'Open Sans', sans-serif;
    height: 20px;
    outline: none;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #1E5799;
    width: 20px;
}

.clicked0 {
  background-color: black;
  color: white;
}
.clicked1 {
  background-color: gray;
  color: white;
}
.clicked2 {
  background-color: orange;
  color: black;
}
.clicked3 {
  background-color: red !important;
  color: white;
}
table {
  text-align: center;
  //border: 1px solid black;
}
tr {
  //border: 1px solid red;
}
td {
  //border: 1px solid blue;
}

JavaScript

document.getElementById('realtxt').onkeyup = searchSel;

// Variables
var MU = ["MU",14],
	KL = ["KL",8],
  IN = ["IN",14],
  CH = ["CH",8],
  FF = ["FF",8],
  GE = ["GE",14],
  KO = ["KO",15],
  KK = ["KK",15],
  currentDiff = 0,
  firstRoll = 20,
  secondRoll = 20,
  thirdRoll = 20,
  select = document.getElementById('realitems'),
  abilities = [
  	["Athletik", GE, KO, KK],
  	["Klettern", MU, GE, KK],
  	["Körperbeherrschung", MU, IN, GE],
  	["Schleichen", MU, IN, GE],
  	["Schwimmen", GE, KO, KK],
  	["Selbstbeherrschung", MU, KO, KK],
  	["Sich verstecken", MU, IN, GE],
  	["Singen", IN, CH, CH],
  	["Sinnesschärfe", KL, IN, IN],
  	["Tanzen", CH, GE, GE],
  	["Zechen", IN, KO, KK],
  	["Gassenwissen", KL, IN, CH],
  	["Menschenkenntnis", KL, IN, CH],
  	["Überreden", MU, IN, CH],
  	["Fährtensuchen", KL, IN, KO],
  	["Fallen stellen", KL, FF, KK],
  	["Fesseln/Entfesseln", FF, GE, KK],
  	["Fischen/Angeln", IN, FF, KK],
  	["Orientierung", KL, IN, IN],
  	["Wettervorhersage", KL, IN, IN],
  	["Wildnisleben", IN, GE, KO],
  	["Götter und Kulte", KL, KL, IN],
  	["Heraldik", KL, KL, FF],
  	["Kriegskunst", MU, KL, CH],
  	["Rechnen", KL, KL, IN],
  	["Rechtskunde", KL, KL, IN],
  	["Sagen und Legenden", KL, IN, CH],
  	["Schätzen", KL, IN, IN],
  	["Sternkunde", KL, KL, IN],
  	["Tierkunde", MU, KL, IN],
  	["Sprachen kennen Garethi", KL, IN, CH],
  	["Sprachen kennen Thorwalsch", KL, IN, CH],
  	["Lesen/Schreiben Kusliker Zeichen", KL, KL, FF],
  	["Boote fahren", GE, KO, KK],
  	["Heilkunde: Wunden", KL, CH, FF],
  	["Holzbearbeitung", KL, FF, KK],
  	["Kochen", KL, IN, FF],
  	["Lederarbeiten", KL, FF, FF],
  	["Malen/Zeichen", KL, IN, FF],
  	["Schneidern", KL, FF, FF],
  	["Seefahrt", FF, GE, KK]
   ]

// Fill Dropdown
for (var i = 0; i<abilities.length; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = abilities[i][0];
    select.appendChild(opt);
}

// Create Numberpad
var table =...