JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab1 tab">tab1<span class="arrow"><span></span></span></div>
<div class="tab2 tab">tab2<span class="arrow"><span></span></span></div>
<div class="tab3 tab">tab3<span class="arrow"><span></span></span></div>

CSS

div {
    background:orange;
    width:100px;
    height:90px;
    line-height:90px;
    float:left;
    padding:0 10px;
    position:relative;
    color:#fff
}
div .arrow {
    position:absolute;
    right:0;
    top:0;
    width:60px;
    height:90px;

    overflow:hidden
}
div .arrow span {
    width:95px;
    height:95px;
    border:9px solid #f6f4f4;
    display:block;
    position:absolute;
    left:-80px;top:-17px;
    -moz-transform: rotate(-45deg);
     -o-transform:      rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     transform:         rotate(-43deg);
     -ms-filter:  "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
     filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.7071067811865483,
            M12=0.7071067811865467,
            M21=-0.7071067811865467,
            M22=0.7071067811865483,
            SizingMethod='auto expand');
}
div:last-child .arrow span {
   outline:30px solid #fff   
}