JSFiddle - React, Tailwind, and code Playground

HTML

<canvas height="30"></canvas>
<canvas height="30"></canvas>

<div></div>

CSS

div {
    width            : 80px;
    height           : 60px;
    border           : 10px solid #FFF;
    border-radius    : 10px;
    border-top-color : #000;
    margin-left      : 10px
}

canvas:nth-child(1){
    position : absolute;
    top      : 0px;
    left     : 0px;
}

JavaScript

var ctx = document.getElementsByTagName( 'canvas' )[0].getContext( '2d' );

ctx.moveTo          ( 14, 14 );
ctx.quadraticCurveTo( 16, 10, 20, 10 );
ctx.lineTo          ( 90, 10 );
ctx.quadraticCurveTo( 100, 10, 100, 20 );

ctx.lineWidth = 10;
ctx.stroke();




var ctx = document.getElementsByTagName( 'canvas' )[1].getContext( '2d' );

ctx.moveTo          ( 10, 20 );
ctx.quadraticCurveTo( 10, 10, 20, 10 );
ctx.lineTo          ( 90, 10 );
ctx.quadraticCurveTo( 100, 10, 100, 20 );

ctx.lineWidth = 10;
ctx.strokeStyle = '#F00';
ctx.stroke();