JSFiddle - React, Tailwind, and code Playground

HTML

<main class='flex-expand flex-row'>
    <side class='flex-tight flex-col'>
        <div class='tools flex-col flex-center flex-tight'>
            <div class='tool pencil flex-tight selected'>
                <div></div>
                &#9998;
                <div></div>
            </div>
            <div class='tool eraser flex-tight'>
                <div></div>
                &#10063;
                <div></div>
            </div>
            <div class='undo flex-tight'>
                <div></div>
                &#128552;
                <div></div>
            </div>
            <div></div>
        </div>
         <div class='tools flex-col'>
             <div class='currentColor flex-tight'></div>
             <div class='tripple flex-tight flex-row'>
                 <div class='color black1'></div>
                 <div class='color black2'></div>
                 <div class='color black3'></div>
             </div>
             <div class='tripple flex-tight flex-row'>
                 <div class='color red1'></div>
                 <div class='color red2'></div>
                 <div class='color red3'></div>
             </div>
             <div class='tripple flex-tight flex-row'>
                 <div class='color green1'></div>
                 <div class='color green2'></div>
                 <div class='color green3'></div>
             </div>
             <div class='tripple flex-tight flex-row'>
                 <div class='color blue1'></div>
                 <div class='color blue2'></div>
                 <div class='color blue3'></div>
             </div>
             <div class='tripple flex-tight flex-row'>
                 <div class='color purple1'></div>
                 <div class='color purple2'></div>
                 <div class='color purple3'></div>
             </div>
             <div class='tripple flex-tight flex-row'>
                 <div class='color yellow1'></div>
                 <div class='color yellow2'></div>
   ...

CSS

html, body{
    height: 100%;
    width: 100%;
    padding:0;
    margin:0;
    position:relative;
}

main{
    background-color: orange;
    padding: 0.2em;
}

.tools{
    background-color: white;
    padding:0.2em;
    border: 0.1em solid black;
    margin: 0.1em;
}

.tool, .undo{
    background-color: white;
    color: black;
    width: 1.2em;
    height: 1.2em;
    font-size: 200%;
    text-align: center;
    border: 1px solid black;
    cursor: default;
    border-bottom: 0;
}

.undo{
    border-bottom: 1px solid black;
}

.tripple{
    border: 1px solid black;
    border-top: 0;
    border-bottom: 0;
    height: 1.5em;
}

.color{
}

.colorBottom{
    border-top: 1px solid black;
}

.color:last-child{
    border-right: none;
}

.color.black1{
    background-color: #000000;
}

.color.black2{
    background-color: #797979;
}

.color.black3{
    background-color: #ffffff;
}

.color.red1{
    background-color: #822213;
}

.color.red2{
    background-color: #f24d2f;
}

.color.red3{
    background-color: #f88781;
}

.color.green1{
    background-color: #317f34;
}

.color.green2{
    background-color: #63e965;
}

.color.green3{
    background-color: #94ed92;
}

.color.blue1{
    background-color: #002b7e;
}

.color.blue2{
    background-color: #005cf0;
}

.color.blue3{
    background-color: #738ff3;
}

.color.purple1{
    background-color: #3b2a70;
}

.color.purple2{
    background-color: #6860ed;
}

.color.purple3{
    background-color: #cc98f1;
}

.color.yellow1{
    background-color: #7b742f;
}

.color.yellow2{
    background-color: #fff36c;
}

.color.yellow3{
    background-color: #fff899;
}

.color.teal1{
    background-color: #257676;
}

.color.teal2{
    background-color: #59f6fa;
}

.color.teal3{
    background-color: #8ef9f8;
}

.color.orange1{
    background-color: #f25a37;
}

.color.orange2{
    background-color: #f28244;
}

.color.orange3{
    background-color: #fba74b;
}

.color.brown1{
    background-color: #79451d;
}

.color.brown2{
   ...

JavaScript

var color = 'black';
var tool = 'pencil';


$(window).ready(function(){
    var canvas = $('canvas');
	canvas[0].height = canvas.parent().outerHeight();
	canvas[0].width = canvas.parent().outerWidth();
});

$('.color').click(function(){
	color = $(this).css('background-color');
    $('.currentColor').css('background-color', color);
    console.log(color);
    console.log($('.currentColor').css('background-color'));
});

$('.tool').click(function(){
	$('.tool.selected').removeClass('selected');
    $(this).addClass('selected');
});

$('.tool.pencil').click(function(){
	tool = 'pencil';
});

$('.tool.eraser').click(function(){
	tool = 'eraser';
});

$('.undo').click(function(){
	var last = undoSlices.pop();
    var next = undoSlices.pop();
    if (!next)
        next = 0;
    undoSlices.push(next);
    for (x=0; x < last - next; x++){
        clickX.pop();
        clickY.pop();
        clickDrag.pop();
        clickColor.pop();
        redraw();
    }
});

context = $('canvas')[0].getContext("2d");

$('canvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
		
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  redraw();
});

$('canvas').mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

$('canvas').mouseup(function(e){
  	paint = false;
    undoSlices.push(clickX.length);
});

$('canvas').mouseleave(function(e){
  paint = false;
});

var undoSlices = new Array();
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var clickColor = new Array();

var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  if (tool=='pencil')
	  clickColor.push(color);
  else if (tool=='eraser')
      clickColor.push('white');
}

function redraw(){
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
 ...