JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

<table>
<tr>
  <td class="down">1</td>
  <td class="down">2</td>
  <td class="down">3</td>
  <td class="down">4</td>
  <td class="down">5</td>
  <td class="down">6</td>
  <td class="up">7</td>
  <td class="up">8</td>
  <td class="up">9</td>
</tr>
<tr>
  <td class="down">x</td>
  <td class="down">x</td>
  <td class="down">-</td>
  <td class="down">x</td>
  <td class="down">-</td>
  <td class="down">-</td>
  <td class="up">x</td>
  <td class="up">x</td>
  <td class="up">-</td>
</tr>
<tr>
  <td class="down">x</td>
  <td class="down">-</td>
  <td class="down">x</td>
  <td class="down">x</td>
  <td class="down">x</td>
  <td class="down">x</td>
  <td class="up"></td>
  <td class="up"></td>
  <td class="up"></td>
</tr>
<tr>
  <td class="down">x</td>
  <td class="down">x</td>
  <td class="down">-</td>
  <td class="down">x</td>
  <td class="down">-</td>
  <td class="down">-</td>
  <td class="up">x</td>
  <td class="up">x</td>
  <td class="up">-</td>
</tr>
<tr>
  <td class="down">1</td>
  <td class="down">2</td>
  <td class="down">3</td>
  <td class="down">4</td>
  <td class="down">5</td>
  <td class="down">6</td>
  <td class="up">7</td>
  <td class="up">8</td>
  <td class="up">9</td>
</tr>
</table>




<div id="upperdeck">
  
</div>

CSS

html { 
    font-family: arial;
    font-size: 13px;
    line-height: 14px !important; 
}

table { border-collapse: collapse; }
td { border: 1px solid black; width: 20px; text-align: center;}

.down { background-color: #33ee77; }
.up   { background-color: orange; } 

.blender {
  width: 40px;
  padding: 0;
  border: none;
}
.deckdivider { 
    width: 25px; 
    padding: 0; 
    background-color: #fff;      
    text-align: center; 
    text-transform: uppercase;
    font-family: arial;
    font-size: 11px;
    line-height: 14px !important;
}

.deckdivider div.text { 
    text-align: center;
    /*
    height: 60px;
    vertical-align: top;
    transform: rotate(270deg); 
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform-origin: 50% 50%; 
    float: right;
    */
}

JavaScript

var countTRs = $("table tr").length;

$("<td class='blender' rowspan=" + countTRs + "><td class='deckdivider' rowspan=" + countTRs + "><div class='text'>U<br>p<br>p<br>e<br>r<br>d<br>e<br>c<br>k</div></td>").insertBefore($("td.up").first());