Обычные табы на простом CSS

В этой статье расскажу как сделать обычные табы на обычном CSS. Для этого нужно:

1. CSS

.tabs {
 position: relative;
 clear: both;
 margin-top: 20px;
}
.tab {
 float: left;
}
.tab input[type="radio"] {
 display: none;
}
.tab label {
 display: block;
 position: relative;
 z-index: 2;
 top: 1px;
 height: 30px;
 padding: 5px 15px;
 border-width: 1px 0 1px 1px;
 border-style: solid;
 border-color: #c8c8c8;
 background-color: #f1f1f1;
 box-sizing: border-box;
}
.tab input[type="radio"]:checked ~ label {
 background-color: #fff;
 border-bottom-color: #fff;
}
.tab:last-child label {
 border-right: 1px solid #c8c8c8;
}
.tab-content {
 min-height: 250px;
 position: absolute;
 padding: 20px;
 top: 30px;
 right: 0;
 left: 0;
 bottom: 0;
 overflow: hidden;
 border: 1px solid #c8c8c8;
 background-color: #fff;
}
.tab-content * {
 margin: 0;
 opacity: 0;
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: translateX(-100%);
 -moz-transform: translateX(-100%);
 -ms-transform: translateX(-100%);
 -o-transform: translateX(-100%);
 transition: all 0.6s ease;
}
.tab input[type="radio"]:checked ~ label ~ .tab-content {
 z-index: 1;
}
.tab input[type="radio"]:checked ~ label ~ .tab-content * {
 opacity: 1;
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
}
.tab-content img {
 max-width: 330px;
}

2. HTML

<div class="tabs">
 <div class="tab">
 <input type="radio" id="tab-1" name="tab-group-1" checked>
 <label for="tab-1">Tab 1</label>
 <div class="tab-content">
 <h3>Header</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis hic sapiente asperiores minus animi nam temporibus cumque magnam ...</p>
 </div>
 </div>
 <div class="tab">
 <input type="radio" id="tab-2" name="tab-group-1">
 <label for="tab-2">Tab 2</label>
 <div class="tab-content">
 <img src="https://farm8.staticflickr.com/7325/9435941420_ef06aa22c0_o.jpg" />
 </div>
 </div>
 <div class="tab">
 <input type="radio" id="tab-3" name="tab-group-1">
 <label for="tab-3">Tab 3</label>
 <div class="tab-content">
 <iframe width="360" height="250" src="//www.youtube.com/embed/iDjyjWxUrQc" frameborder="0" allowfullscreen></iframe>
 </div>
 </div>
</div>

Вот и все готово.