JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <li><a href="">Office</a></li>
    <li><a href="">Office</a></li>
    <li><a href="">Office Two</a></li>
    <li><a href="">Short</a></li>
</nav>

CSS

nav {
    background: #1abc9c;
}
nav li {
    display:inline-block;
    position:relative;
    margin:10px;
    margin-right:0;
    border: 5px solid #16a085;
    padding:15px 30px;
}
nav li a {
    color:white;
    font-weight:bold;
    display:block;
    height:100%;
    width:100%;
    text-decoration:none;
    font-size:24px;
    font-family:Arial;
}
/* Arrows */
nav li:after, nav li a:after, nav li:before, nav li a:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events:none;
}
nav li:before, nav li a:before {
    left: -5px;   
}
nav li a:before, nav li a:after {
    border-left-color: #1abc9c;
    border-width: 16px;
    margin-top: -16px;
}
nav li:before, nav li:after {
    border-left-color: #16a085;
    border-width: 23px;
    margin-top: -23px;
}
nav li:before {
    z-index:0;
}
nav li a:before {
    z-index:1;
}
nav li:after {
    z-index:2;
}
nav li a:after {
    z-index:3;
}