JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-control">
  <div class="header">
    <div class="tab-item">
      tab1
    </div>
    <div class="tab-item current">
      tab2
    </div>
    <div class="tab-item">
      tab3
    </div>
  </div>
  <div class="main"></div>
</div>

SCSS

.tab-control{
  border:solid 1px #000;
  .header{
    overflow:hidden;
    .tab-item{
      float:left;
      padding: 5px 8px;
      border: solid 1px #000;
      border-top: none;
      border-left: none;
      cursor: pointer;
      &.current{
        background:#CCC;
        border-bottom: solid 1px #CCC;
      }
    }
  }
  .main{
    border-top: solid 1px #000;
    margin-top: -1px;
    min-height:100px;
    background:#CCC;
  }
}

JavaScript

$('.tab-item').on("click", function(){
	$(this).addClass('current').siblings().removeClass('current') 
})