JSFiddle - React, Tailwind, and code Playground

by jbalsas

HTML

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

CSS

#first {
    margin: 20px;
}

JavaScript

var canvas = document.getElementById("first");
var context = canvas.getContext("2d");

var draw = function(color1, color2, shadow) {
    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, color1);
    lingrd.addColorStop(0, color2);
    context.fillStyle = lingrd;
    context.shadowColor = shadow;
    context.shadowBlur = 5;
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 3;
    context.fill();
}

draw("#474747", "#6a6a6a", "#b9b9b9");

canvas.addEventListener("mouseover", function() {
    draw("#ff0000", "#00ff00", "#0000ff");
});

canvas.addEventListener("mouseout", function() {
    draw("#474747", "#6a6a6a", "#b9b9b9");
});