JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='tabs'>
<li >MENÜ 1</li>
<li class='active'>MENÜ 2</li>
<li>MENÜ 3</li>
<li>MENÜ 4</li></ul>

CSS

ul.tabs{width:100%; float:left;  border-bottom:5px solid #000; background: url('logolar/passive.png') bottom repeat-x; text-align: center; }
         ul.tabs li{ float:left; background: url('logolar/passive.png') white bottom repeat-x; width:90px; height:38px; line-height:4; cursor:pointer; color:#000;}
         ul.tabs li.active{background: url('logolar/active.png') #000;line-height:3; border-top-left-radius:15px; border-top-right-radius:15px; margin-top:-1px; width: 138px; height: 39px; color:#fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, .1);}
        ul.tabs .active{border:1px solid #000;border-bottom:0;width:80px;height:39px;position:relative;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;
}
        ul.tabs .active:after, ul.tabs  .active:before{ content:'';width:20px;height:30px;border:1px solid #000;position:absolute;bottom:-3px;border-top:0;}
        ul.tabs .active:after{border-left:0;-moz-border-radius:0 0 25px 0;-webkit-border-radius:0 0 25px 0;left:-21px;}
        ul.tabs .active:before{border-right:0;-moz-border-radius:0 0 0 25px;-webkit-border-radius:0 0 0 25px;right:-21px;}