JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<table class="table table-striped" id="changeoverFormsheetsList">
  <thead>
    <tr>
      <th>Wire / How many wires you need to change?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="button" id="co_target_0_0" onclick="selectChangeoverType(co_target_0_0, 0, 0)" class="btn btn-info" value="0" data-selvalue="0"></td>
      <td><input type="button" id="co_target_0_1" onclick="selectChangeoverType(co_target_0_1, 0, 2)" class="btn btn-info" value="1" data-selvalue="2"></td>
      <td><input type="button" id="co_target_0_2" onclick="selectChangeoverType(co_target_0_2, 0, 4)" class="btn btn-info" value="2" data-selvalue="4"></td>
    </tr>
    <tr>
      <td class="tableValue">0 min</td>
      <td class="tableValue">2 min</td>
      <td class="tableValue">4 min</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Terminal / How many terminals you need to change?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="button" id="co_target_1_0" onclick="selectChangeoverType(co_target_1_0, 1, 0)" class="btn btn-info" value="0" data-selvalue="0"></td>
      <td><input type="button" id="co_target_1_1" onclick="selectChangeoverType(co_target_1_1, 1, 7)" class="btn btn-info" value="1" data-selvalue="7"></td>
      <td><input type="button" id="co_target_1_2" onclick="selectChangeoverType(co_target_1_2, 1, 14)" class="btn btn-info" value="2" data-selvalue="14"></td>
      <td><input type="button" id="co_target_1_3" onclick="selectChangeoverType(co_target_1_3, 1, 21)" class="btn btn-info" value="3" data-selvalue="21"></td>
    </tr>
    <tr>
      <td class="tableValue">0 min</td>
      <td class="tableValue">7 min</td>
      <td class="tableValue">14 min</td>
      <td class="tableValue">21 min</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Seal / How many seals you need to change?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="button" id="co_target_2_0" onclick="selectChangeoverType(co_target_2_0, 2, 0)"...

CSS

table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}

.tableValue {
  text-align: left;
  font-size: 25px;
}

th {
  text-align: center;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.btn {
  width: 300px;
  background: #ffd42a;
  font-weight: bold;
  font-size: 22px;
  color: #000;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  border-radius: 2px;
  vertical-align: middle;
  padding: 20px;
  margin: 10px 5px;
  border: none;
}

.btn:hover {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

thead tr:first-child {
  background: #ffd42a;
  color: #000;
  border: none;
  width: 100%;
  font-size: 20px;
}