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><button class="btn btn-default disabled">Offensiv</button></td>
  <td><button class="btn btn-default disabled">Strahd</button></td>
  <td><button class="btn btn-default disabled">Brann</button></td>
  <td><button class="btn btn-default disabled">Cadwell</button></td>
  <td><button class="btn btn-default disabled">Colin</button></td>
  <td><button class="btn btn-default disabled">Siegfried</button></td>
  <td><button class="btn btn-default btn-primary clipboard" onclick="copyTextToClipboard('/roll detailed:True expression:2d20k1+7 label:Keeper Cadwell strikes forward without hesitation')">Adv+7</button></td>
</tr><tr>
  <td><button class="btn btn-default disabled">Angriffswürfe</button></td>
  <td id="1"></td>
  <td id="2"></td>
  <td id="3"></td>
  <td id="4"></td>
  <td id="5"></td>
  <td><button class="btn btn-default btn-primary clipboard" onclick="copyTextToClipboard('/roll detailed:True expression:2d20kl1+7 label:Keeper Cadwell attacks whilest being mildly handicapped')">DisAdv+7</button></td>
</tr><tr>
  <td><button class="btn btn-default disabled">Davon Treffer</button></td>
  <td id="6"></td>
  <td id="7"></td>
  <td id="8"></td>
  <td id="9"></td>
  <td id="10"></td>
  <td><button class="btn btn-default btn-primary clipboard" onclick="copyTextToClipboard('/roll detailed:True expression:1d20+7 label:Keeper Cadwell lunges forward')">d20+7</button></td>
</tr><tr>
  <td><button class="btn btn-default disabled">Schaden verteilt</button></td>
  <td id="11"></td>
  <td id="12"></td>
  <td id="13"></td>
  <td id="14"></td>
  <td id="15"></td>
  <td><button class="btn btn-default btn-primary clipboard" onclick="copyTextToClipboard('/roll detailed:True expression:1d8+7 label:The bigger the beast, the bigger they...

CSS

td {
  text-align: center;
  padding: 0px;
  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;
  height: 18px; 
  padding: 0px; 
  margin: 0px;
}
.btn-mini {
  width: 25px;
}
.disabled {
  width: 100%;
}
.clipboard {
  width: 100%;
}

JavaScript

function modify(id,amount) {
	console.log(id + " -> " + amount);
  if (amount == 0) document.getElementById(id).firstChild.data = "0";
  else {
    var target_button = document.getElementById("v" + id);

    var current_amount = parseInt(target_button.firstChild.data);
    target_button.firstChild.data = current_amount + parseInt(amount);
	}
}

// add the button to the div
var myDiv = [];
var button_p1 = [];
var button_p10 = [];
var button_m1 = [];
var button_m10 = [];
var button_val = [];

for (var i=1;i<=95;i++) {
  // get the element you want to add the button to
	myDiv[i] = document.getElementById(i);
  button_p1[i] = document.createElement("BUTTON");
  button_p10[i] = document.createElement("BUTTON");
  button_m1[i] = document.createElement("BUTTON");
  button_m10[i] = document.createElement("BUTTON");
  button_val[i] = document.createElement("BUTTON");
  button_p1[i].innerHTML = "+1";
  button_p10[i].innerHTML = "+10";
  button_m1[i].innerHTML = "-1";
  button_m10[i].innerHTML = "-10";
  button_val[i].innerHTML = "0";
  button_p1[i].classList.add("btn");
  button_p1[i].classList.add("btn-success");
  button_p1[i].classList.add("btn-mini");
  button_p10[i].classList.add("btn");
  button_p10[i].classList.add("btn-success");
  button_p10[i].classList.add("btn-mini");
  button_m1[i].classList.add("btn");
  button_m1[i].classList.add("btn-danger");
  button_m1[i].classList.add("btn-mini");
  button_m10[i].classList.add("btn");
  button_m10[i].classList.add("btn-danger");
  button_m10[i].classList.add("btn-mini");
  button_val[i].classList.add("btn");
  if (i>=46 && (i%10>0 && i%10<6)) button_val[i].classList.add("btn-primary");
  else button_val[i].classList.add("btn-default");
  button_val[i].classList.add("btn-mini");
  button_p1[i].id = i;
  button_p10[i].id = i;
  button_m1[i].id = i;
  button_m10[i].id = i;
  button_val[i].id = "v" + i;
  button_p1[i].onclick = function(event) {modify(this.id,1);}
  button_p10[i].onclick = function(event)...