JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="ce" height="200" width="200"></canvas>

CSS

canvas {
     border: 1px solid #dfdfdf;   
}

JavaScript

var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']

window.onload = function() {
    var ce = document.getElementById('ce');
    var c = ce.getContext('2d');
    c.translate(ce.offsetWidth / 2, ce.offsetHeight / 2);
    
    for(var pie = 0; pie < 5; pie++) {
        c.save();
        c.rotate(pie/5 * Math.PI * 2);
        
        c.beginPath();
        c.moveTo(0, -10);
        c.lineTo(-50, -80);
        c.lineTo(50, -80);
        c.lineTo(0, -10);
        c.lineWidth = 5;
        c.lineCap = 'square';
        c.strokeStyle = colors[pie];
        c.stroke();
        
        c.restore();
    } 
}