.tabs {
  clear: both;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  /* you can either manually set a min-height here or do it via JS ---> */
}

.tab {
  float: left;
}

.tab label {
  margin-right: 20px;
  position: relative;
  top: 0;
  cursor: pointer;
  color: #333;
  text-transform: uppercase;
}

.tab [type="radio"] {
  display: none;
}

.tab__content {
  position: relative;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.2s cubic-bezier(0.42, 0, 0.34, 1.01);
  opacity: 0;
}

[type="radio"]:checked ~ label {
  border-bottom: 2px solid #0071a1;
  color: #0071a1;/* #1d1d1d */
  z-index: 2;
}

[type="radio"]:checked ~ label ~ .tab__content {
  z-index: 1;
  opacity: 1;
}