JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<table>
<tr>
  <td colspan="3"><button class="btn btn-default disabled">Würfel</button></td>
  <td colspan="3"><button class="btn btn-default disabled">Menge</button></td>
  <td colspan="3"><button class="btn btn-default disabled">Modifikator</button></td>
  <td colspan="1"><button class="btn btn-default disabled">Tag</button></td>
  <td></td>
</tr><tr>
  <td><button class="btn btn-primary" id="d4" onclick="setDice('d4');">D4</button></td>
  <td><button class="btn btn-primary" id="d6" onclick="setDice('d6');">D6</button></td>
  <td><button class="btn btn-primary" id="d8" onclick="setDice('d8');">D8</button></td>
  <td><button class="btn btn-warning" id="x1" onclick="setAmount('1');">x1</button></td>
  <td><button class="btn btn-warning" id="x2" onclick="setAmount('2');">x2</button></td>
  <td><button class="btn btn-warning" id="x3" onclick="setAmount('3');">x3</button></td>
  <td><button class="btn btn-info" id="+-1" onclick="setMod('-1');">-1</button></td>
  <td><button class="btn btn-info" id="+0" onclick="setMod('0');">+0</button></td>
  <td><button class="btn btn-info" id="+1" onclick="setMod('1');">+1</button></td>
  <td><button class="btn btn-success" id="Detailed" onclick="setTag('Detailed');">Detailed</button></td>
  <td colspan="3" rowspan="3"><button class="btn btn-primary" onclick="docopy();">Copy to Clipboard</button></td>
</tr><tr>
  <td><button class="btn btn-primary" id="d10" onclick="setDice('d10');">D10</button></td>
  <td><button class="btn btn-primary" id="d12" onclick="setDice('d12');">D12</button></td>
  <td><button class="btn btn-primary" id="d20" onclick="setDice('d20');">D20</button></td>
  <td><button class="btn btn-warning" id="x4" onclick="setAmount('4');">x4</button></td>
  <td><button class="btn btn-warning" id="x5"...

CSS

td {
  text-align: center;
  padding: 1px;
  height: 18px;
  /*border: 1px solid #000;*/
}
table {
  border: collapse;
}
body {
  font-size: 10px;
  background: #000;
}
.btn {
  display: inline-flex;
  justify-content: center;
  text-align: center;
  min-height: 18px;
  padding: 0px;
  margin: 0px;
  white-space: normal;
  width: 100%;
  min-width: 25px;
  height: 100%;
  max-width: 351px;
}
.disabled {
  width: 100%;
}
.clipboard {
  width: 100%;
}
input[type="text"]:disabled {
  color: #ddd;
  background: #222;
}
input {
  background: #ccc;
}

JavaScript

var dice = "";
var amount = "1";
var mod = "";
var label= "Take that, evil foe! Thou shalt not liveth any longer!";
var label_id = 1;
var tag_detailed = true;
var tag_secret = false;
var tag_label = false;
var tutorial_visible = true;
function setDice(x) {
	dice = x;
  if (x == "d20k1" || x == "d20kl1") setAmount("2");
  var label_name_array = ["d4","d6","d8","d10","d12","d20","d20k1","d20kl1","d100"];
  setButtonColors(label_name_array, x, 'btn-success', 'btn-warning', 'btn-primary', 'btn-primary', 'btn-success', true, 'btn-success', 0, 9);
  writeChange();
}
function setAmount(x) {
	amount = x;
  var label_name_array = ["x1","x2","x3","x4","x5","x6","x7","x8","x9"];
  setButtonColors(label_name_array, "x" + x, 'btn-success', 'btn-warning', 'btn-danger', 'btn-warning', 'btn-success', true, 'btn-success', 0, 9);
  writeChange();
}
function setMod(x) {
	mod = x;
  var label_name_array = ["+-1","+0","+1","+2","+3","+4","+5","+6","+7"];
  setButtonColors(label_name_array, "+" + x, 'btn-success', 'btn-warning', 'btn-info', 'btn-info', 'btn-success', true, 'btn-success', 0, 9);
  writeChange();
}
function setTag(x) {
	document.getElementById(x).classList.remove('btn-success');
	document.getElementById(x).classList.remove('btn-danger');
	if (x=="Detailed") {
  	tag_detailed = !tag_detailed;
    document.getElementById(x).classList.add((tag_detailed ? 'btn-success' : 'btn-danger'));
    document.getElementById(x).classList.remove((!tag_detailed ? 'btn-success' : 'btn-danger'));
  }
  else if (x=="Secret") {
  	tag_secret = !tag_secret;
    document.getElementById(x).classList.add((tag_secret ? 'btn-success' : 'btn-danger'));
    document.getElementById(x).classList.remove((!tag_secret ? 'btn-success' : 'btn-danger'));
  }
  else if (x=="Label") {
  	tag_label = !tag_label;
    document.getElementById(x).classList.add((tag_label ? 'btn-success' : 'btn-danger'));
    document.getElementById(x).classList.remove((!tag_label ? 'btn-success' : 'btn-danger'));
   ...