JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<br />
<table class="bordplanstatustable">
<tbody>
  <tr>
    <td class="bordplanstatuscell">Ledige Pladser</td>
    <td class="bordplanstatus1">152</td>
    <td class="bordplanstatuscell">Reserverede Pladser</td>
    <td class="bordplanstatus3">0</td>
  </tr>
</tbody>
</table>
<br />

<br />
<table class="bordplan" cellspacing="0" background="http://i63.tinypic.com/qrcbo3.jpg" width="776" height="576" border="0">
<tbody>
<tr>
  <td class="bordplanstatus"></td>
</tr>
<tr>
  <td class="bordplanstatus"></td>
</tr>
<tr>
  <td class="bordplanstatus"></td>
</tr>
<tr>
  <td class="bordplanstatus"></td>
</tr>
<tr>
  <td class="bordplanstatus"></td>
</tr>
<tr>
  <td class="bordplanstatus"></td>
</tr>
<tr>
  <td class="bordplanstatus"></td>
</tr>
<tr>
  <td class="bordplanstatus"></td>
</tr>
<tr>
  <td class="bordplanstatus"></td>
</tr>
<tr>
  <td class="bordplanstatus"></td>
  <td class="bordplanstatus1" title="" id="1">1</td>
  <td class="bordplanstatus1" title="" id="2">2</td>
  <td class="bordplanstatus1" title="" id="3">3</td>
  <td class="bordplanstatus1" title="" id="4">4</td>
  <td class="bordplanstatus1" title="" id="5">5</td>
  <td class="bordplanstatus1" title="" id="6">6</td>
  <td class="bordplanstatus1" title="" id="7">7</td>
  <td class="bordplanstatus1" title="" id="8">8</td>
  <td class="bordplanstatus"></td>
  <td class="bordplanstatus"></td>
  <td class="bordplanstatus"></td>
  <td class="bordplanstatus"></td>
  <td class="bordplanstatus"></td>
  <td class="bordplanstatus"></td>
  <td class="bordplanstatus"></td>
  <td class="bordplanstatus"></td>
  <td class="bordplanstatus1" title="" id="9">9</td>
  <td class="bordplanstatus1" title="" id="10">10</td>
  <td class="bordplanstatus1" title="" id="11">11</td>
  <td class="bordplanstatus1" title="" id="12">12</td>
  <td class="bordplanstatus1" title="" id="14">13</td>
  <td class="bordplanstatus1" title="" id="14">14</td>
  <td class="bordplanstatus1" title="" id="15">15</td>
  <td...

CSS

body,html {
    margin:0;
}

.bordplan {
    padding: 0px;
    margin: 0px;
    //border: 1px solid #000000;
    border-spacing: 0px;
    //background-image: url('images/bordplan-min.png');
    background-repeat: no-repeat;
}

.bordplanbook {
  padding: 0px;
  margin: 0px;     
  border: 1px solid #000000;
  border-spacing: 0px;
  background-image: url('images/bordplan-min.png');
  background-repeat: no-repeat;
}

td.bordplanstatus {
  width: 22px;
  height: 22px;
  font-size: 10px;
  text-align: center;
  padding: 0px;
  cursor: default;
}

.bordplanstatustable{
  font-size: 12px;
  text-align: center;
}

td.bordplanstatus0 {
  width: 22px;
  height: 22px;
  background-color: #AAAAAA;
  font-size: 10px;
  text-align: center;
  padding: 0px;
  cursor: default;
}

td.bordplanstatus1 {
  width: 22px;
  height: 22px;
  background-color: #00FF00;
  color: #000000;
  font-size: 11px;
  text-align: center;
  padding: 0px;
  cursor: pointer;
  border: 1px solid #00FF00;
}

td.bordplanstatus1:hover {
  border: 1px solid black;
}


td.bordplanstatus1noklik {
  width: 22px;
  height: 22px;
  background-color: #00FF00;
  font-size: 11px;
  color: #000000;
  text-align: center;
  padding: 0px;
  border: 1px solid #00FF00;
  cursor: default;
}

td.bordplanstatus2 {
  width: 22px;
  height: 22px;
  background-color: #6666FF;
  font-size: 11px;
  text-align: center;
  padding: 0px;
  cursor: default;
}
td.bordplanstatus2mad {
  width: 22px;
  height: 22px;
  background-color: #6666FF;
  color: #F0F000;
  font-size: 11px;
  text-align: center;
  padding: 0px;
  cursor: default;
}

td.bordplanstatus3 {
  width: 24px;
  height: 22px;
  background-color: #FF0000;
  color: #000000;
  font-size: 11px;
  text-align: center;
  padding: 0px;
  cursor: default;
}

td.bordplanstatus3mad {
  width: 22px;
  height: 22px;
  background-color: #FF0000;
  color: #F0F000;
  font-size: 11px;
  text-align: center;
  padding: 0px;
  cursor: default;
}
td.bordplanstatus3madbetalt {
  width: 22px;
 ...