JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab">
  <div class="tablinks active">Tab 1</div>
  <div class="tablinks">Tab 2</div>
  <div class="tablinks">Tab 3</div>
</div>
<div class="container">

</div>

CSS

body{
  background-image: url("http://www.titania-foto.com/wp-content/uploads/2016/11/flugzeug-himmel-1280x853.jpg");
}

.tab{
  width: 60%;
  margin-top: 50px;
  margin-left: 10%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tablinks{
  background: rgba(255,96,0,0.8);
  text-align: center;
  width: 32%;
  padding: 1em 0;
  border: 2px solid white;
  border-bottom: none;
  border-radius: 1em 1em 0 0;
}

.tablinks.active{
  background: rgba(0,0,255,0.8);
  color: #fff;
}

.container{
  width: calc(80% - 4px);
  min-height: 300px;
  background: rgba(0,0,255,0.8);
  border: 2px solid white;
  margin: -2px auto 0 auto;
  border-radius: 0 1em 1em 1em;
}