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: 10px 10px 10px 10px;
  border-style: solid solid inset inset;
  border-color: transparent transparent transparent transparent;
}

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


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


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

tr:nth-child(2) td:nth-child(2) { 
  border-width: 5px 5px 10px 5px;
  border-style: solid solid inset solid;
  border-color: #f65314 #ffbb00 black #00a1f1;
}

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