<div class="iframe-tabs">
    <input id="iframe-tab-deck" type="radio" name="tabs" checked>
    <label for="iframe-tab-deck" title="Сайт на компьютере">Комп</label>
 
    <input id="iframe-tab-tablet" type="radio" name="tabs">
    <label for="iframe-tab-tablet" title="Сайт на планшете">Планшет</label>
 
    <input id="iframe-tab-mobile" type="radio" name="tabs">
    <label for="iframe-tab-mobile" title="Сайт на мобильном">Телефон</label>
    
    <section id="content-deck">
       <iframe src="https://codepen.io/" width="1024" height="768" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
    </section>  
    <section id="content-tablet">
        <iframe src="https://codepen.io/" width="992" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
    </section> 
    <section id="content-mobile">             
      <iframe src="https://codepen.io/" width="322" height="558" frameborder="0" allowfullscreen="allowfullscreen"></iframe>  
    </section>  
   
</div>
/* Базовый контейнер табов */
.iframe-tabs {
  min-width: 320px;
  max-width: 1920px;
  padding: 0px;
  margin: 0 auto; 
}
/* стили секций с содержанием */
section {
  display: none;
  padding: 15px;
  background: #fff;
  border: 1px solid #ddd;
}
.iframe-tabs input {
  display: none;
}
/* стили вкладок (табов) */
.iframe-tabs label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #aaa;
  border: 1px solid #ddd;
  background: #f1f1f1;
  border-radius: 3px 3px 0 0;
}
/* изменения стиля заголовков вкладок при наведении */
.iframe-tabs label:hover {
  color: #888;
  cursor: pointer;
}
/* стили для активной вкладки */
.iframe-tabs input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 1px solid #009933;
  border-bottom: 1px solid #fff;
  background: #fff;
}
/* активация секций с помощью переключателя :checked */
#iframe-tab-deck:checked ~ #content-deck,
#iframe-tab-tablet:checked ~ #content-tablet,
#iframe-tab-mobile:checked ~ #content-mobile {
  display: block;
}
/*ширина и выоста устройства*/
#content-deck{
  
}
#content-tablet{
  background:url("http://etsphoto.ru/photocache/0a/0a7a78b57ed39a05f97da34644095a82.jpg") center no-repeat;
      padding: 72px 206px 145px 113px;
}
#content-mobile{
   background:url("http://www.ntsup.eu/tiny/image/00001/fff.jpg") center no-repeat;
      padding: 196px 85px 194px 212px;
}
@media (min-width: 981px){
  display: block;
    margin: 20px auto;
    border: none;
}

/* медиа запросы для различных типов носителей */  
@media screen and (max-width: 680px) {
  .iframe-tabs label {
    font-size: 0;
  }
 
  .iframe-tabs label:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 400px) {
  .iframe-tabs label {
    padding: 15px;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.