.tabs-container {
  max-width: 100%;
  margin: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Hide radios */
input[type="radio"] {
  display: none;
}

/* tabs header */
.tabs {
  display: flex;
  position: relative;
  background: #f9fafc;
  border-bottom: 1px solid #eee;
}

.tabs label {
  flex: 1;
  text-align: center;
  padding: 16px;
  cursor: pointer;
  font-weight: 500;
  color: #666;
  transition: color .3s;
}

.tabs label:hover {
  color: #111;
}

/* Slider */
.slider-search {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 33.333%;
  background: linear-gradient(90deg, #52B44B, #1669F2);
  transition: transform .35s ease;
}

/* Active tab */
#tab1:checked ~ .tabs label:nth-child(1),
#tab2:checked ~ .tabs label:nth-child(2),
#tab3:checked ~ .tabs label:nth-child(3) {
  color: #111;
  font-weight: 600;
}

/* Move slider */
#tab2:checked ~ .tabs .slider-search {
  transform: translateX(100%);
}

#tab3:checked ~ .tabs .slider-search {
  transform: translateX(200%);
}

/* Content */
.content {
  padding: 25px;
}

.tab-content {
  display: none;
  animation: fade .3s ease;
}

#tab1:checked ~ .content .tab-content:nth-child(1),
#tab2:checked ~ .content .tab-content:nth-child(2),
#tab3:checked ~ .content .tab-content:nth-child(3) {
  display: block;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}