CSS-only tabs

css-only-tabs.css

.tabs {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

li {
  width: 100%;
}

input[type="radio"][name="tabs"] {
  position: absolute;
  z-index: -1;
}
input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
  display: block;
}

label {
  cursor: pointer;
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  height: 56px;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  width: 100%;
}

.tab-label-content {
  width: 100%;
}
.tab-label-content .tab-content {
  position: absolute;
  top: 100px;
  left: 0;
  line-height: 130%;
  display: none;
}

/* SLIDE BAR STYLES */
input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ li:last-of-type .slide-bar {
  left: calc((100% / 4) * 0);
}
input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ li:last-of-type .slide-bar {
  left: calc((100% / 4) * 1);
}
input[type="radio"][name="tabs"]:nth-of-type(3):checked ~ li:last-of-type .slide-bar {
  left: calc((100% / 4) * 2);
}
input[type="radio"][name="tabs"]:nth-of-type(4):checked ~ li:last-of-type .slide-bar {
  left: calc((100% / 4) * 3);
}

.slide-bar {
  width: calc(100% / 4);
  position: absolute;
  left: 0;
  -webkit-transition: left 0.3s ease-out;
  transition: left 0.3s ease-out;
}

/* COSMETIC STYLES */
input[type="radio"][name="tabs"]:checked + .tab-label-content label {
  color: white;
}

label {
  color: white;
  background-color: #9900cc;
}

/* SLIDE-BAR */
.slide-bar {
  background: #cc00ff;
  height: 8px;
  top: calc(100% - 8px);
}

css-only-tabs.html

<ul class="tabs slide">
  <input type="radio" name="tabs" id="tab1" checked>
  <li class="tab-label-content" id="tab1-content">
    <label for="tab1">Tab 1</label>
    <div class="tab-content"></div>
  </li>
  
  <input type="radio" name="tabs" id="tab2">
  <li class="tab-label-content" id="tab2-content">
    <label for="tab2">Tab 2</label>
    <div class="tab-content"></div>
  </li>
  
  <input type="radio" name="tabs" id="tab3">
  <li class="tab-label-content" id="tab3-content">
    <label for="tab3">Tab 3</label>
    <div class="tab-content"></div>
  </li>
  
   <input type="radio" name="tabs" id="tab4">
   <li class="tab-label-content" id="tab4-content">
    <label for="tab4">Tab 4<div class="slide-bar"></div></label>
    <div class="tab-content"></div>
  </li>  
</ul>