JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="tab">
        <div class="content">Tab3</div>
    </div>
    <div class="tab active">
        <div class="shadow1"></div>
        <div class="shadow2"></div>
        <div class="content">Tab2</div>
    </div>
    <div class="tab">
        <div class="content">Tab3</div>
    </div>
</div>

CSS

.container {
  background-color: rgba(255,255,255,1);
  padding: 20px;
}
.tab {
    position: relative;
}
.tab .content{
  height: 50px;
  background-color: #4790CE;
  margin-bottom: 10px;
  border-radius: 20px;
  position: relative;
  line-height: 50px;
    padding-left: 50px;
}

.tab.active .content {
  background-color: #63B6FF;
  border-radius: 20px 0 0 20px;
    position:relative;
    
}
.tab .content {
    position:relative;
    z-index:2;
 background: red;   
}
.tab .shadow1 {
   box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    position:absolute;
    top: 0;
    left: 0;
    right:10px;
    bottom: 50%;
    border-radius: 20px 0 0 3px;
z-index: 1;

    -moz-transform: rotate(0.5deg);
-moz-transform-origin: 0 50%;
    -webkit-transform: rotate(0.5deg);
    -webkit-transform-origin: 0 50%;
    -o-transform: rotate(0.5deg);
    -o-transform-origin: 0 50%;
    -ms-transform: rotate(0.5deg);
    -ms-transform-origin: 0 50%;




}

.shadow2 {
   box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    position:absolute;
    top: 50%;
    left: 0;
    right:10px;
    bottom: 0;
    border-radius: 3px 0 0 20px;
    z-index: 1;
    -webkit-transform: rotate(-0.5deg);
-webkit-transform-origin: 0 50%;
    -moz-transform: rotate(-0.5deg);
-moz-transform-origin: 0 50%;
    -o-transform: rotate(-0.5deg);
    -o-transform-origin: 0 50%;
    -ms-transform: rotate(-0.5deg); 
    -ms-transform-origin: 0 50%;




}