JSFiddle - React, Tailwind, and code Playground

HTML

<ul id=menu>
    <li><a href=#>short</a></li>
    <li><a href=#>long long long long long menu item</a></li>
    <li><a href=#>average item</a></li>
</ul>

CSS

body
{
background-color: #A79B85;
font-family: Arial;
}
#menu
{
padding: 0;
margin: 0;
position: absolute;
top: 0;
}

#menu li
{
display: inline-block;
height: 30px;
padding: 0;
margin: 0;
background-color: #FFF;
border-left: 5px solid #E4DBC9;
border-right: 5px solid #E4DBC9;
-moz-box-shadow:    0px 0px 3px 0px #000;
-webkit-box-shadow: 0px 0px 3px 0px #000;
box-shadow:         0px 0px 3px 0px #000;
position: relative;
top: -5px;
}

#menu li.hover
{
top: 0;
}

#menu a
{
text-align: center;
display: block;
color: #A79B85;
text-decoration: none;
padding: 7px 5px 0 5px;

}

#menu>li>canvas
{
position: absolute;
margin-top: 30px;
margin-left: -8px;
}

JavaScript

var height = 22;
(function(){
var border = parseInt($('#menu>li').css('border-left-width'));
var shadow = 3; //TO DO: get it from css
$('#menu>li').each(function(i,e){
var width = $(e).width()+2*border+2*shadow;
var canvas = $('<canvas width='+width+' height='+height+' />').prependTo($(e))[0];
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(shadow, 0);
context.lineTo(width-shadow, 0);
context.lineTo(width-shadow, border);
context.lineTo(width/2, height-border-shadow);
context.lineTo(shadow, border);
context.lineTo(shadow, 0);
context.closePath();
context.shadowColor = "rgba(0, 0, 0, 1)"; //TO DO: get it from css
context.shadowBlur = shadow;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;

context.fillStyle = "rgba(228, 219, 201, 1)"; // TO DO: get it from css
context.fill();

context.beginPath();
context.moveTo(border+shadow, 0);
context.lineTo(width-border-shadow, 0);
context.lineTo(width/2, border+shadow);
context.lineTo(shadow+border, 0);
context.closePath();
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.fillStyle = "rgba(255, 255, 255, 1)"; //TO DO: get it from css
context.fill();

});
$('#menu>li>a').hover(function(){
$(this).parent().addClass('hover');
}, function(){
$(this).parent().removeClass('hover');
}
);
})();