JSFiddle - React, Tailwind, and code Playground

HTML

<div>Example Text</div>

JavaScript

$(function(){
   
    $("div").each(function(){
        var CHARS = $(this).text().split('');
        $(this).html("");
        $.each(CHARS,function(index,char){
            var canvas = $("<canvas />")
                    .css("width","40px")
                    .css("height","40px")
                    .get(0);
            $("div").append(canvas);
            var ctx = canvas.getContext("2d");
            var gradient=ctx.createLinearGradient(0,0,130,0);
            gradient.addColorStop("0","blue");
            gradient.addColorStop("0.5","blue");
            gradient.addColorStop("0.51","red");
            gradient.addColorStop("1.0","red");
            ctx.font = '130pt Calibri';
            ctx.fillStyle=gradient;
            
            ctx.fillText(char,10,130);
        });

        
    });
    
});