* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}
body {
  background:#777777;
  font-family:"Raleway",sans-serif;
}
.tabs {
  position:absolute;
  top: 55%;
  left:50%;
  transform:translate(-50%,-50%);
  width: 800px;
  height:600px;
}
.tabs .tab-header {
  background:#7c3af5dc;
  padding:10px;
  display:flex;
}
.tabs .tab-header > div {
  position:relative;
  width:25%;
  text-align:center;
  padding:10px;
  z-index:2;
  font-weight:600;
  color:rgb(255, 255, 255);
  cursor:pointer;
  transition:all 300ms ease-in-out;
}
.tabs .tab-header > div.active {
  color:#387be2;
}
.tabs .tab-indicator {
  position:absolute;
  width:calc(25% - 5px);
  height:40px;
  background:#00ffff;
  top:10px;
  left:10px;
  border-radius:20px;
  transition:all 300ms ease-in-out;
}
.tabs .tab-body {
  position:relative;
  padding:20px;
  background:#3f3c3cab;
  border-top:1px solid #ddd;
  height:calc(100% - 50px);
  overflow:hidden;
}
.tabs .tab-body > div {
  position:absolute;
  opacity:0;
  top:-100%;
  transform:translateY(-10px);
  transition:opacity 300ms ease-in-out,
            transform 300ms ease-in-out;
}
.tabs .tab-body > div.active {
  transform:translateY(0px);
  top:20px;
  opacity:1;
}
.tabs .tab-body h1 {
  color:rgb(255, 255, 255);
  margin-bottom:12px;
}
.tabs .tab-body p {
  color:rgb(255, 255, 255);
  font-size:18px;
}