JSFiddle - React, Tailwind, and code Playground

by Yaroslav Mozghovyi

HTML

<!DOCTYPE html>
<table cellpadding="2">
  <tr>
    <td class="invisible"></td>
    <td class="del">‒</td>
    <td class="del">‒</td>
    <td class="del">‒</td>
    <td class="del">‒</td>
    <td class="invisible"></td>
  </tr>
  <tr>
    <td class="del">‒</td>
    <td class="mainTable borderTop"></td>
    <td class="mainTable borderTop"></td>
    <td class="mainTable borderTop"></td>
    <td class="mainTable borderTop"></td>
    <td class="add">+</td>
  </tr>
  <tr>
    <td class="del">‒</td>
    <td class="mainTable"></td>
    <td class="mainTable"></td>
    <td class="mainTable"></td>
    <td class="mainTable"></td>
    <td class="invisible"></td>
  </tr>
  <tr>
    <td class="del">‒</td>
    <td class="mainTable"></td>
    <td class="mainTable"></td>
    <td class="mainTable"></td>
    <td class="mainTable"></td>
    <td class="invisible"></td>
  </tr>
  <tr>
    <td class="del">‒</td>
    <td class="mainTable"></td>
    <td class="mainTable"></td>
    <td class="mainTable"></td>
    <td class="mainTable"></td>
    <td class="invisible"></td>
  </tr>
  <tr>
    <td class="invisible"></td>
    <td class="add">+</td>
    <td class="invisible"></td>
    <td class="invisible"></td>
    <td class="invisible"></td>
    <td class="invisible"></td>
  </tr>
</table>

CSS

.mainTable {
  border: #FFF;
  border: 1px double rgb(72, 170, 230);
  
}

tr {
  background: rgb(72, 170, 230);
}

td {
  width: 50px;
  height: 50px;
}

.add { 
  background: rgb(243, 165, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
  font-weight: bold;
  
}

.add:hover {
  background: rgb(246, 192, 82);
}

.del { 
  background: rgb(178, 0, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
  border-style: hidden;
  font-weight: bold;
}

.del:hover {
  background: rgb(202, 76, 73);
}

.invisible {
  visibility: hidden;
}