JSFiddle - React, Tailwind, and code Playground

HTML

<div id='st'>
<input type="button"  onclick="cl(this,0)" value="" />
<input type="button"  onclick="cl(this,1)" value="" />
<input type="button"  onclick="cl(this,2)" value="" />
<input type="button"  onclick="cl(this,3)" value="" />
<input type="button"  onclick="cl(this,4)" value="" />
<input type="button"  onclick="cl(this,5)" value="" />
<input type="button"  onclick="cl(this,6)" value="" />
<input type="button"  onclick="cl(this,7)" value="" />
<input type="button"  onclick="cl(this,8)" value="" />
<input type="button"  onclick="cl(this,9)" value="" /> 
<br/>
<input type="button"  onclick="cl(this,10)" value="" />
<input type="button"  onclick="cl(this,11)" value="" />
<input type="button"  onclick="cl(this,12)" value="" />
<input type="button"  onclick="cl(this,13)" value="" />
<input type="button"  onclick="cl(this,14)" value="" />
<input type="button"  onclick="cl(this,15)" value="" />
<input type="button"  onclick="cl(this,16)" value="" />
<input type="button"  onclick="cl(this,17)" value="" />
<input type="button"  onclick="cl(this,18)" value="" />
<input type="button"  onclick="cl(this,19)" value="" /> 
<br/>
<input type="button"  onclick="cl(this,20)" value="" />
<input type="button"  onclick="cl(this,21)" value="" />
<input type="button"  onclick="cl(this,22)" value="" />
<input type="button"  onclick="cl(this,23)" value="" />
<input type="button"  onclick="cl(this,24)" value="" />
<input type="button"  onclick="cl(this,25)" value="" />
<input type="button"  onclick="cl(this,26)" value="" />
<input type="button"  onclick="cl(this,27)" value="" />
<input type="button"  onclick="cl(this,28)" value="" />
<input type="button"  onclick="cl(this,29)" value="" /> 
<br/>
<input type="button"  onclick="cl(this,30)" value="" />
<input type="button"  onclick="cl(this,31)" value="" />
<input type="button"  onclick="cl(this,32)" value="" />
<input type="button"  onclick="cl(this,33)" value="" />
<input type="button"  onclick="cl(this,34)" value="" />
<input...

CSS

*,html,div{
  font-size:0px;
}

.black {
  background-color:#000000;
  border:1px solid #000  !important; 
}

.gray {
  background-color:#555555;
  border:1px solid #555  !important; 
}


.dark {
  background-color:#444444;
  border:1px solid #444  !important; 
}
.wt {
  background-color:#ffffff;
  border:1px solid #eee  !important; 
}

.light {
  background-color:#bbbbbb;
  border:1px solid #bbb  !important; 
}
input{
  border:1px solid #eee  ;
   background-color:transparent;
   padding:0 !important;
   outline:none !important;
   margin:0 !important;
   width:20px;
   height:20px;
   
}
input:hover{ 
   background-color:#000;
   padding:0 !important;
   outline:none !important;
   margin:0 !important; 
   cursor:pointer;
   
}

JavaScript

var col = 'black';
var cl = function(th,it){


 
	th.classList.remove('black'); 
  th.classList.remove('gray'); 
  th.classList.remove('dark'); 
  th.classList.remove('light');  
   th.classList.remove('wt');  
     
	th.classList.add(col);
  
    document.getElementById('result').innerHTML =
  (document.getElementById('result').innerHTML).replace(','+it+',',',').replace(/,,/g,',');
  
   if(col != "wt"){
  document.getElementById('result').innerHTML =
  (document.getElementById('result').innerHTML+','+it+',').replace(/,,/g,',');
   
   }
   
  
  document.getElementById('result2').innerHTML = document.getElementById('st').innerHTML;
};