JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<canvas id="can" height="460" width="320"></canvas>

JavaScript

$(document).ready(function(){
    var can = $("#can")[0];
    ctx = can.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, 250, 600);
    gradient.addColorStop(0, '#e1e2e3');
    gradient.addColorStop(0.45, '#96989b');
    gradient.addColorStop(0.45, '#9fa1a4');
    gradient.addColorStop(0.45, '#abadb0');
    gradient.addColorStop(1, '#bdbec0');
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 320, 460)
})