JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

CSS

td {
	font-size:0;
}

JavaScript

var t = '<td style="width: 12px; height: 7px; border: 1px solid silver; background-color: white; font-size: 0;">&nbsp;</td>';
var l = '<td colspan="2" style="width: 24px; height: 7px; border: 1px solid silver; background-color: white; font-size: 0;">&nbsp;</td>';
 
var s = [l, l, l, l, t];
document.write ('<table cellspacing="0" cellpadding="0" align="center">');
//document.write ('<thead><tr><td style="width:12px; font-size:0">&nbsp;</td><td style="width:12px; font-size:0">&nbsp;</td></tr></thead><tbody>');
for (var j = 0; j < 8; j++)
   {
   var k = Math.floor((j + 1) / 2);
   s [k] = s [k].replace('white', 'peru');
   document.write ('<tr>' + s.join ('') + '</tr>');
   s [k] = s [k].replace ('peru', 'white');
   s.reverse();
   }
document.write ('</tbody></table>');