JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <span>Вкладка 1<i></i></span>
    <span>Вкладка 2<i></i></span>
    <span>Вкладка 3<i></i></span>
</div>

CSS

.tabs span {
    background: -moz-linear-gradient(top, #0066FF ,#000);    
    background: -o-linear-gradient(top, #0066FF ,#000);
    background: -webkit-linear-gradient(top, #0066FF ,#000);
    filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#0066FF, endColorstr=#000000);
    background: linear-gradient(top, #0066FF ,#000);
    color: #fff;
    padding : 10px 20px 15px;
    border-radius: 10px 10px 0 0;
    position: relative;
    display: inline-block;
    margin: auto 10px;
}

.tabs i:before{
    display: block;
    position: absolute;
    z-index: -1;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 1px;
    box-shadow: 0 25px 3px 1px #888,
                0 20px 3px 2px #888,     
                0 15px 3px 3px #888,     
                0 10px 3px 4px #888;   
}
.tabs span:before{
    display: block;
    position: absolute;
    content: '';
    bottom: -10px;
    left: -20px;
    height: 10px;
    width: 10px;
    border-radius: 0 0 20px 0;
    border: 10px solid #000;
    clip: rect(10px 20px 20px 10px);
}
.tabs span:after {
    display: block;
    position: absolute;
    content: '';
    bottom: -10px;
    right: -20px;
    height: 10px;
    width: 10px;
    border-radius: 0 0 0 20px;
    border: 10px solid #000;
    clip: rect(10px 20px 20px 10px);
}