JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<div id="wrapper">
  <ul id="tabs">
    <li><a href="#" class="active"><span>Tab 1</span></a></li>
    <li><a href="#"><span>Tab 2</span></a></li>
    <li><a href="#"><span>Tab 3</span></a></li>
  </ul>

  <div class="tab-content">
    aaa
  </div>
</div>

CSS

body{
  background:transparent;
  margin:0 auto;
}

#wrapper{
  padding:10px;
}

#tabs{
  list-style:none;
  padding:0px;
  margin:0px;
  font-size:0px;
}

#tabs li{
  display:inline-block;
  vertical-align:bottom;
}
#tabs li a{
  display:block;
  background:#DDE2E0;
  color:#000;
  padding:15px 20px;
  font-size:15px;
  text-decoration:none;
  margin-left:0px;
  border-bottom:0px;
  box-sizing:border-box;
  position:relative;
  transition-duration:0.3s;
  border-top:3px solid transparent;
}
#tabs li a.active{
  border-top:3px solid red;
  background:#fff;
  color:#000;
}
#tabs li a span{
  display:block;
}

.tab-content{
  background:#fff;
  padding:10px;
}

JavaScript

$("#tabs li a").click(function(e){
	e.preventDefault();
	$("#tabs li a").removeClass("active");
  $(this).addClass("active");
});