JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="clock">
<table border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td width="50" height="50" align="center">&nbsp;</td>
<td width="50" height="50" align="center">&nbsp;</td>
<td width="50" height="50" align="center">&nbsp;</td>
<td width="50" height="50" align="center"><div class="but" id="c12" onclick="clock('c12','c12')">12</div></td>
<td width="50" height="50" align="center">&nbsp;</td>
<td width="50" height="50" align="center">&nbsp;</td>
<td width="50" height="50" align="center">&nbsp;</td>
</tr>
<tr>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center"><div class="but" id="c11" onclick="clock('c11','c10')">11</div></td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center"><div class="but" id="c1" onclick="clock('c1','c2')">1</div></td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center">&nbsp;</td>
</tr>
<tr>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center"><div class="but" id="c10" onclick="clock('c10','c8')">10</div></td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center"><div class="but" id="c2" onclick="clock('c2','c4')">2</div></td>
<td height="50" align="center">&nbsp;</td>
</tr>
<tr>
<td height="50" align="center"><div class="but" id="c9" onclick="clock('c9','c6')">9</div></td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center"><div class="but" id="c3" onclick="clock('c3','c6')">3</div></td>
</tr>
<tr>
<td height="50" align="center">&nbsp;</td>
<td height="50" align="center"><div class="but" id="c8" onclick="clock('c8','c4')">8</div></td>
<td height="50" align="center">&nbsp;</td>
<td height="50"...

CSS

.but {width:50px;height:50px;background-color:Red;color:#ffffff;}

.blue {background-color:blue;}

JavaScript

function clock(el1,el2) {
var el1 = document.getElementById(el1);
var el2 = document.getElementById(el2);

if (el1.className == "but") {el1.className = "but blue";} 
else {el1.className = "but";}

if (el2.className == "but") {el2.className = "but blue";} 
else {el2.className = "but";}


}