JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
  <td colspan=2></td>
  <td colspan=2></td>
</tr>
<tr>
  <td></td>
  <td colspan=2></td>
  <td></td>
</tr>
</table>

CSS

table td { width: 30px; height: 30px }

table { 
  border-width: 20px 20px 20px 20px;
  border-style: inset inset inset inset;
  border-color: black black black black;
}

tr:nth-child(1) td:nth-child(1) { 
  border-width: 10px 10px 10px 10px;
  border-style: solid solid solid solid;
  border-color: #f65314 #f65314 #f65314 #f65314;
}


tr:nth-child(1) td:nth-child(2) { 
  border-width: 10px 10px 10px 10px;
  border-style: solid solid solid solid;
  border-color: #7cbb00 #7cbb00 #7cbb00 #7cbb00;
}


tr:nth-child(2) td:nth-child(1) { 
  border-width: 10px 10px 10px 10px;
  border-style: solid solid solid solid;
  border-color: #00a1f1 #00a1f1 #00a1f1 #00a1f1;
}

tr:nth-child(2) td:nth-child(2) { 
  border-width: 10px 10px 10px 10px;
  border-style: solid solid solid solid;
  border-color: #ffbb00 #ffbb00 #ffbb00 #ffbb00;
}

tr:nth-child(2) td:nth-child(3) { 
  border-width: 10px 10px 10px 10px;
  border-style: solid solid solid solid;
  border-color: #00a1f1 #00a1f1 #00a1f1 #00a1f1;
}