JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<a href="#">link</a>
<a href="#" class="active">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>

CSS

div {margin:10px;}
a {
    display:block;
    float:left;
    width:60px;
    height:40px;
    background:lightgray;
    position:relative;
    margin:0 10px;
    text-align:center;
    line-height:40px;
    text-decoration:none;
}
a:before, a:after {
    display:block;
    position:absolute;
    content:"";
    width:0;
    height:0;
}
a:before {
    top:0;
    left:-20px;
    border-top:20px solid transparent;
    border-left:10px solid transparent;
    border-right:10px solid lightgray;
    border-bottom:20px solid lightgray;
}
a:after {
    top:0;
    right:-20px;
    border-bottom:20px solid transparent;
    border-right:10px solid transparent;
    border-left:10px solid lightgray;
    border-top:20px solid lightgray;
}
a:hover,
a.active{
    background:red;
}
a:hover:before,
a.active:before {
    border-right-color: red;
    border-bottom-color: red; 
}
a:hover:after,
a.active:after {
    border-left-color:red;
    border-top-color:red;  
}