JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="1050" height="800">
</canvas>

CSS

@font-face {
    font-family: 'orbitron';
    src: url('http://www.giobeta.com/tacticID/font/orbitron-light.ttf');
}
#myCanvas{
    border:1px solid #000000;    

}

JavaScript

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();

//MAIN RECTANGLE
ctx.rect(10, 50, 286, 250);
ctx.stroke();

//STEP ONE
ctx.rect(20, 60, 266, 50);
ctx.stroke();

//STEP TWO
ctx.rect(20, 120, 266, 50);
ctx.stroke();

//STEP THREE
ctx.rect(20, 180, 266, 50);
ctx.stroke();

//STEP FOUR
ctx.rect(20, 240, 266, 50);
ctx.stroke();

//FONT FOR STEPS
ctx.font="27px orbitron";

//STEP TEXTS
ctx.strokeText("STEP 1",100,95);

ctx.strokeText("STEP 2",98, 155);

ctx.strokeText("STEP 3",98, 215);

ctx.strokeText("SEE IT LIVE",70, 275);