JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<canvas id="canvas" height="500" width="500" class="bezier"></canvas>
</div>

CSS

html, body { height: 100%; margin: 0; background-color: #220112; }
#wrapper { position: relative; height: 100%; width: 100%; min-width: 1024px; min-height: 768px; }
#canvas { position: absolute; top: 89px; width: 100%; height: 300px; z-index: 4;   }

JavaScript

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 2;
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(-200, 350);
ctx.bezierCurveTo(199, 604, 220, 180, 500, 350);
ctx.stroke();