JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
        <ul class="list">
            <li class="first"><a href="">Первая</a>
            <li class="second fade-last"><a href="">Вторая</a>
        </ul>
    </div>

CSS

.wrap{
margin:100px auto;
width:300px;
height:100%;
background:#fff;
}

a{
display:block;
padding:5px 10px;
text-align:center;
}

ul{
margin:0;
padding:0;
list-style:none;
}



li{
display:inline-block;
min-width:100px;
position:relative;
}


.first{
margin-left:-1px;
background:#fff;
border-radius:5px 5px 0px 0px;
box-shadow:inset 1px 3px 3px 0px #ccc, inset -2px 3px 3px -1px #ccc;
border-top:1px solid #ccc;
}

.second{
margin-left:0px;
border-radius:0px 0px 5px 5px;
}


.second>a{
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 31%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#ffffff), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top,  #ffffff 31%,#f4f4f4 100%);
background: -o-linear-gradient(top,  #ffffff 31%,#f4f4f4 100%);
background: -ms-linear-gradient(top,  #ffffff 31%,#f4f4f4 100%);
background: linear-gradient(top,  #ffffff 31%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
border-radius:0px 0px 5px 5px;
border-bottom:1px solid #ccc;
}

.fade-last{
width:100px;
height:32px;
position:relative;
background:transparent;
}

.fade-last:before{
content:'';
position:absolute;
bottom:2px;
left:-3px;
width:3px;
height:3px;
background:#fff;
}
    
.fade-last:after{
content:'';
position:absolute;
top:0px;
right:-5px;
width:5px;
height:100%;
background:#fff;
box-shadow:0px 0px 5px 5px #fff;
}

.fade-first{
width:100px;
height:32px;
position:relative;
background:transparent;
}

.fade-first:before{
content:'';
position:absolute;
left:0px;
width:10px;
height:100%;
background:#fff;
box-shadow:0px 0px 5px 5px #fff;
}

JavaScript

$(function(){
    $('.list li a').click(function(){
        $('.list li').addClass('second').removeClass('first');
        $('.list li:first-child').addClass('fade-first');
        $('.list li:last-child').addClass('fade-last');
        $(this).parent('li').removeClass('fade-first fade-last second').addClass('first');
        return false;
    });
});