JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <li><a href="#">Test sjdbfjksdbfkbdsf<br>kjdbcdjkbcjkc<br></a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
</div><!--nav-->

CSS

#nav {
    background:#4fd34e;
    height:100px;
    width:100%;
    position:relative;
}

#nav li {
    display:inline-block;
    line-height:2;
    border:3px solid #FFF;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    position:relative;
    margin-top:20px;
    margin-left:20px;
}

#nav li:before {
    content:"";
    display:block;
    position:absolute;
    width:20px;
    height:20px;
    background:#4fd34e;
    border:3px solid #FFF;
    border-width:3px 3px 0 0;
    margin-left:-12px;
    margin-top:10px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(45deg); /* FF */
    transform: rotate(45deg);
 }

#nav li:after {
    content:"";
    display:block;
    position:absolute;
    width:20px;
    height:20px;
    background:#4fd34e;
    border:3px solid #FFF;
    border-width:3px 3px 0 0;
    right:-14px;
    top:8px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(45deg); /* FF */
    transform: rotate(45deg);
    z-index:100;
 }

#nav li a {
    display:block;
    text-decoration:none;
    padding:5px 20px;

}

#nav li:first-child:before,
#nav li:last-child:after {
    display:none;
    
}