Cacher is the code snippet organizer for pro developers

<div class="tabs">
  <input id="tab-i1" type="radio" name="tab" checked="checked" />
  <div class="tabs-l">
    <label for="tab-i1" id="tab-l1">
      <span>Вкладка 1</span>
    </label>
  </div>
  <input id="tab-i2" type="radio" name="tab" />
  <div class="tabs-l">
    <label for="tab-i2" id="tab-l2">
      <span>Вкладка 2</span>
    </label>
  </div>
  <input id="tab-i3" type="radio" name="tab" />
  <div class="tabs-l">
    <label for="tab-i3" id="tab-l3">
      <span>Вкладка 3</span>
    </label>
  </div>
  <div class="tabs-content">
    <div id="tab-c1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo consequuntur provident doloribus aut quia possimus aliquid architecto iusto dicta quae modi, magni hic eaque quisquam ullam laborum est nesciunt delectus.</div>
    <div id="tab-c2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, consequuntur aspernatur aliquid nobis quos vel rerum dolorum quam. Corrupti ea, consectetur nihil iure laudantium amet neque! Deleniti, expedita enim quia?</div>
    <div id="tab-c3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident veritatis perferendis voluptatibus cupiditate enim earum numquam aliquam impedit, dignissimos eveniet sunt, similique voluptatem amet sint tempore minima. Ducimus dolore, obcaecati.</div>
  </div>
</div>

.tabs {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-top:25px;
    -ms-flex-pack:distribute;
        justify-content:space-around;
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
}
.tabs > .tabs-l     {
    -ms-flex-preferred-size:33%;
        flex-basis:33%;
    text-align:center;
}
.tabs-l label {
    display:inline-block;
    text-align:center;
    cursor:pointer;
    background:red;
    color:#FFF;
    padding:7px;
}
.tabs > input {
    display:none;
}
.tabs-content {
    position:relative;
    margin-top:25px;
}
.tabs-content > div {
    position:absolute;
    top:0;
    left:-9999px;
    opacity:0;
    -webkit-transition:opacity .777s;
    transition: opacity .777s
}
.tabs > #tab-i1:checked ~ .tabs-l > #tab-l1,
.tabs > #tab-i2:checked ~ .tabs-l > #tab-l2,
.tabs > #tab-i3:checked ~ .tabs-l > #tab-l3 {
    background:green;
}
.tabs > #tab-i1:checked ~ .tabs-content #tab-c1,
.tabs > #tab-i2:checked ~ .tabs-content #tab-c2,
.tabs > #tab-i3:checked ~ .tabs-content #tab-c3 {
    position:static;
    left:0;
    opacity:1;
}