JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab">
  <div class="tablinks active">Tab 1</div>
  <div class="tabspace"></div>
  <div class="tablinks">Tab 2</div>
  <div class="tabspace"></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;
}

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

.container:before {
  content: '';
  border-top: 2px solid white;
  border-right: 2px solid white;
  position: absolute; top: -2px; right: -2px; width: 25%; height: 2em;
  border-radius: 0 1em 0 0; background-color: rgba(0,255,255,0.2);
}
.container{
  position: relative; 
  width: calc(80% - 4px);
  min-height: 300px;
  background: rgba(0,0,255,0.8);
  border: 2px solid white;
  border-top: none;
  margin: 0 auto 0 auto;
  border-radius: 0 1em 1em 1em;
}