JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="block active">Раз</div>
    <div class="block">Два</div>
    <div class="block">Три</div>

CSS

.block{
    position: relative;
    float: left;
    padding: 20px 50px;
    height: 20px;
    background: #ccc;
    border: 1px solid #888;
    border-right: 0;
}

.block:after{
    content:'';
    position: absolute;
    top: 9px;
    right: -21px;
    width: 42px;
    height: 42px;
    background: inherit;
    border-top: 1px solid #888;
    border-right: 1px solid #888;
    -webkit-transform: rotate(45deg);
    z-index: 1;
}

.block.active{
    background: #e3f2ff;
}