<div class="container">
  <div class="tab-container">
    <input id="tab-1" type="radio" name="tabs" checked="checked" />
    <input id="tab-2" type="radio" name="tabs" />
    <input id="tab-3" type="radio" name="tabs" />
    <input id="tab-4" type="radio" name="tabs" />
    <div class="tabs">
      <label for="tab-1">Super</label>
      <label for="tab-2">Fancy</label>
      <label for="tab-3">CSS-only</label>
      <label for="tab-4">Tabs</label>
    </div>
    <div class="tab-content">
      <div class="tab">
        <h3>Lorem Ipsum</h3>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium eaque velit molestiae officiis eveniet voluptas perferendis autem ab itaque eum asperiores, atque nam sequi culpa. Eius ducimus consectetur totam deleniti?
        </p>
      </div>
      <div class="tab">
        <h3>Dolor sit amet</h3>
        <p>
          Dolor sit amet consectetur adipisicing elit. Laudantium eaque velit molestiae officiis eveniet voluptas perferendis autem ab itaque eum asperiores, atque nam sequi culpa. Eius ducimus consectetur totam deleniti? Lorem, ipsum 
        </p>
      </div>
      <div class="tab">
        <h3>Consectetur adipisicing elit</h3>
        <p>
          Consectetur adipisicing elit. Laudantium eaque velit molestiae officiis eveniet voluptas perferendis autem ab itaque eum asperiores, atque nam sequi culpa. Eius ducimus consectetur totam deleniti? Lorem, ipsum dolor sit amet.
          <hr>
          Consectetur adipisicing elit. Laudantium eaque velit molestiae officiis eveniet voluptas perferendis autem ab itaque eum asperiores, atque nam sequi culpa. Eius ducimus consectetur totam deleniti? Lorem, ipsum dolor sit amet 
        <br><br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident dolore nihil ipsum repudiandae! At omnis ea id delectus error facilis ullam consectetur perspiciatis magnam quam, asperiores expedita! Eum, beatae ex. <br>
        Id, dolores? Quam in dolor quo nesciunt veritatis sapiente, voluptatibus deleniti officia sed sint fugiat eveniet qui consequatur exercitationem deserunt. Perspiciatis, libero debitis? Consequuntur praesentium soluta totam qui numquam architecto!
        </p>
      </div>
      <div class="tab">
        <h3>Laudantium eaque velit</h3>
        <p>
          Laudantium eaque velit molestiae officiis eveniet voluptas perferendis autem ab itaque eum asperiores, atque nam sequi culpa. Eius ducimus consectetur totam deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        </p>
      </div>
    </div>
  </div>
</div>

/* TABS */
$tabs: 5;
$color: #242B36;

.container {
  max-width: 800px;
  margin: 0 auto;
}
input[name="tabs"] {
  display: none;
  @for $i from 1 through $tabs {
    &#tab-#{$i}:checked {
      ~ .tab-content .tab:nth-of-type(#{$i}) {
        display: inline-block;
      }
      ~ .tabs label:nth-child(#{$i}) {
        color: #242b36;
        &:after {
          width: calc(100% - 40px);
          transition: .3s;
        }
      }
    }
  }
}

.tabs {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .3);
  overflow-X: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  white-space: nowrap;
  label {
    display: inline-block;
    padding: 18px;
    position: relative;
    color: lighten($color, 60%);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    &:after {
      content: '';
      background: #007386;
      width: 0;
      height: 4px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: .1s;
    }
  }
}

.tab-container {
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0 5px 25px -10px rgba(0, 0, 0, .3);
  overflow: hidden;
  .tab {
    display: none;
    padding: 0 20px;
  }
}