JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="crearTabla();">
	<p>TABLERO DE DIBUJO EN JAVASCRIPT</p>
	<table width="500" border="1" id="paleta" summary="Tabla de selección de colores">
		  <caption>
			Haga CLICK en un color para comenzar a pintar
		  </caption>
		  <tr id="color">
				<td class="color1 seleccionado"></td>
				<td class="color2" ></td>
				<td class="color3" ></td>
				<td class="color4" ></td>
				<td class="color5"></td>
				<td class="color6" ></td>
			</tr>
			<tr>
				<td colspan="6" id="pincel">Estado del pincel</td>
			</tr>
	</table>
	<p></p>
	<div id="zonadibujo"></div>
	</body>

CSS

.tablerodibujo {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	width: auto;
}
.tablerodibujo td {
	width: 10px;
	height:10px;
	margin: 0px;
	padding: 0px;
}
.color1 {
	background-color: #FF0;
}
.color2 {
	background-color: #0F0;
}
.color3 {
	background-color: #000;
}
.color4 {
	background-color: #F00;
}
.color5 {
	background-color: #06C;
}
.color6 {
	background-color: #FFF;
}

#paleta td{
	width: 35px;
	height: 20px;
}

#pincel{
	text-align: center;
}

.seleccionado{
	border: medium solid #939;
}

JavaScript

function crearTabla(){
		var tablearea = document.getElementById('zonadibujo');
	    table = document.createElement('table');
	    table.className='tablerodibujo';

	for (var i = 0; i < 30; i++) {
	    var tr = document.createElement('tr');
	    for(var j = 0; j < 30; j++){
	    	var td = document.createElement('td');
	    	td.id="obj"+i+j;
	    	
	    	td.style.border ="1px solid #000";
	    	tr.appendChild(td);
	    	td.className = 'color1';
	    }
	    table.appendChild(tr);
	}
	tablearea.appendChild(table);
}

$("#paleta td").click(function() {
  $('#color').each(function(){
      $(this).find('td').each(function(){
          var myClass = $(this).attr("class");
   				myClass = myClass.split(" ");
          if(typeof  myClass[1] != "undefined"){
          	$(this).removeClass( 'seleccionado' );    
          }
      })
  })
  
  var newColor = $(this).addClass( 'seleccionado' );   
  
    $('.tablerodibujo').each(function(){
      $(this).find('td').each(function(){
          	$(this).removeClass(); 
            $(this).addClass(newColor.attr("class"));
      })

   })
  
});