JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://szimek.github.io/signature_pad/js/signature_pad.js"></script>
<ul class="global-color">
  <li class="yellow-pick" data-color="#f8c90d">yellow</li>
  <li class="green-pick" data-color="#3dae49">green</li>
  <li class="orange-pick" data-color="#e87425">orange</li>
  <li class="blue-pick on" data-color="#009cc5">blue</li>
</ul>
<div>
    <input id="clear" type="button" value="clear" />
</div>
<canvas id="can" width="200px" height="200px"></canvas>

CSS

#can{
    border: 1px solid black;
    cursor:default;
}
.on{
    background-color:#f1f1f1;
    text-indent:10px;
}
.global-color li{
    cursor:pointer;
}
.global-color li:hover{
    text-decoration:underline;
}

JavaScript

var canvas = $("#can")[0];
var signaturePad = new SignaturePad(canvas, {
    minWidth: 2,
    maxWidth: 5,
    penColor: "rgb(66, 133, 244)"
});

$('#clear').click(function(){
    signaturePad.clear();
});
$('.global-color li').click(function(){
    $('.on').removeClass('on');
    var $t = $(this);
    $t.addClass('on');
    var selectedColor = $t.data('color');
    signaturePad.penColor = hexToRgb(selectedColor);
});

//http://stackoverflow.com/a/5624139/1026459
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? "rgb("+parseInt(result[1], 16)+
        ","+parseInt(result[2], 16)+
        ","+parseInt(result[3], 16)+")"
     : null;
}