JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.tabs {
    position: relative;
    word-spacing: -.25em;
    letter-spacing: -.25em;
}

.tabs span {
    position: relative;
    background: #0066FF;
    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=#00000000, endColorstr=#FF000000);
    background: linear-gradient(top, #0066FF ,#000);
    color: #fff;
    padding : 5px 20px 10px;
    border-radius: 10px 10px 0 0;
    margin: auto 10px;
    display: inline-block;
    word-spacing: 0;
    letter-spacing: 0;
}

.tabs::before, .tabs span::before, .tabs span:after {
    content: '';
    position: absolute;
    display: block;
}

.tabs::before{
    bottom: -10px;
    left: -10px;
    height: 10px;
    width: 10px;
    border-radius: 0 0 20px 0;
    border: 10px solid #000;
    clip: rect(10px 20px 20px 10px);
}

.tabs span::before {
    top: 0;
    left: 0;
    right: 0;
    height: 4;
    z-index: -1;
    border-radius: 1px;
    box-shadow: 0 22px 3px 1px rgba(0,0,0,.5),
                0 18px 3px 2px rgba(0,0,0,.5),     
                0 14px 3px 3px rgba(0,0,0,.5),    
                0 10px 3px 4px rgba(0,0,0,.5); 
}

.tabs span::after {
    bottom: -10px;
    right: -30px;
    height: 10px;
    width: 20px;
    border-radius: 0 0 20px 20px;
    border: 10px solid #000;
    clip: rect(10px 30px 20px 10px);
}

.tabs span:last-child::after {
    clip: rect(10px 20px 20px 10px);
}