<div class="tabs">

  <div class="tab">
  <input type="radio" id="tab-1" name="tab-group-1" checked>
  <label for="tab-1" style="cursor:pointer;">Вкладка 1</label>
  <div class="tab-content">
  <h3>Название материала</h3>
  <p>Описание материала</p>
  </div>
  </div>

  <div class="tab">
  <input type="radio" id="tab-2" name="tab-group-1">
  <label for="tab-2" style="cursor:pointer;">Вкладка 2</label>
  <div class="tab-content">
  <img src="https://www.uajax.ru/img/illustration.png" />
  </div>
  </div>

  <div class="tab">
  <input type="radio" id="tab-3" name="tab-group-1">
  <label for="tab-3" style="cursor:pointer;">Вкладка 3</label>
  <div class="tab-content">
  <iframe width="360" height="250" src="//www.youtube.com/embed/iDjyjWxUrQc" frameborder="0" allowfullscreen></iframe>
  </div>
  </div>

</div>

.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;
}