JSFiddle - React, Tailwind, and code Playground

by juodikis

HTML

<canvas id="first" width="960" height="200"></canvas>

CSS

#first {
    margin: 20px;
}

JavaScript

var canvas = document.getElementById("first");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, 195);
context.lineTo(230, 195);
context.lineTo(350, 0);
context.lineTo(0, 0);
context.closePath();

context.moveTo(365, 0);
context.lineTo(245, 195);
context.lineTo(615, 195);
context.lineTo(735, 0);
context.closePath();

context.moveTo(750, 0);
context.lineTo(630, 195);
context.lineTo(960, 195);
context.lineTo(960, 0);
context.closePath();

var lingrd = context.createLinearGradient(0, 0, 0, 195);
lingrd.addColorStop(1, "#474747");
lingrd.addColorStop(0, "#6a6a6a");
context.fillStyle = lingrd;
context.shadowColor = "#b9b9b9";
context.shadowBlur = 5;
context.shadowOffsetX = 2;
context.shadowOffsetY = 3;
context.fill();