JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar">
    <div class="navblock home"><a href="/">Home</a></div>    
    <canvas id="canvasId" width="20px" height="40px"></canvas>
    <div class="navblock category"><a href="/apparel/">Apparel</a></div>
    <canvas id="canvasId1" width="20px" height="40px"></canvas>
    <div class="navblock group"><a href="/apparel/jeans/"></a>Jeans</div>
    <canvas id="canvasId2" width="20px" height="40px"></canvas>
    <div class="navblock item">Bla-bla</div>
    <canvas id="canvasId3" width="20px" height="40px"></canvas>
    <div class="clear"></div>
</div>

CSS

.navbar {
    width: 100%;
    margin: 20px auto;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}
.home{background:green}
.category{background:red}
.group{background:blue}
.item{background:red}
.clear {
    clear: both;
}

.navblock {
    float: left;
    padding: 0 20px 0 40px;
}

canvas {
    float:left;
    margin: 0 -20px 0 0;
}

#canvasId  { position: relative; z-index:4}
#canvasId1 { position: relative; z-index:3}
#canvasId2 { position: relative; z-index:2}
#canvasId3 { position: relative; z-index:1}

JavaScript

$(document).ready(function(){
    var context = document.getElementById("canvasId").getContext("2d");
    var width = 20;  // Triangle Width
    var height = 40; // Triangle Height
    var padding = 0;
    
    // Draw a path
    context.beginPath();
    context.moveTo(0,40);        // Top Corner
    context.lineTo(20,20); // Bottom Right
    context.lineTo(0,0);         // Bottom Left
    context.closePath();
    
    // Fill the path
    context.fillStyle = "orange";
    context.fill();
    var context = document.getElementById("canvasId1").getContext("2d");
    var width = 20;  // Triangle Width
    var height = 40; // Triangle Height
    var padding = 0;
    
    // Draw a path
    context.beginPath();
    context.moveTo(0,40);        // Top Corner
    context.lineTo(20,20); // Bottom Right
    context.lineTo(0,0);         // Bottom Left
    context.closePath();
    
    // Fill the path
    context.fillStyle = "green";
    context.fill();
    var context = document.getElementById("canvasId2").getContext("2d");
    var width = 20;  // Triangle Width
    var height = 40; // Triangle Height
    var padding = 0;
    
    // Draw a path
    context.beginPath();
    context.moveTo(0,40);        // Top Corner
    context.lineTo(20,20); // Bottom Right
    context.lineTo(0,0);         // Bottom Left
    context.closePath();
    
    // Fill the path
    context.fillStyle = "blue";
    context.fill();
    var context = document.getElementById("canvasId3").getContext("2d");
    var width = 20;  // Triangle Width
    var height = 40; // Triangle Height
    var padding = 0;
    
    // Draw a path
    context.beginPath();
    context.moveTo(0,40);        // Top Corner
    context.lineTo(20,20); // Bottom Right
    context.lineTo(0,0);         // Bottom Left
    context.closePath();
    
    // Fill the path
    context.fillStyle = "red";
    context.fill();
});