JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="active"><a href="#">tab 1</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab4</a></li>
  </ul>
  <div class="content"></div>

CSS

body {
  background:#eee;width:90%;margin:10px auto
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  list-style: none;
  position: relative;
  border:1px solid #aaa;
  border-bottom:0;
  border-radius:5px 5px 0 0;
  vertical-align:bottom;
}
ul li a {
  padding: 10px 15px;
  display: block;
  line-height: 25px;
  margin-bottom:-1px;
}
ul li.active a {
  background:#fff;
}

.content {
  border:1px solid #aaa;background:#fff;height:200px
}