JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
 <div class="tab">
 <input type="radio" id="tab-1" name="tab-group-1" checked>
 <label for="tab-1" style="cursor:pointer;">ZORNET.RU 1</label>
 <div class="tab-content">
 <h3>Header</h3>
 <p>ZorNet: Создание сайта на uCoz
На сайте найдете интересные решения по создание сайтов, 
также скрипты и шаблоны для uCoz в развитие веб-портала.</p>
 </div>
 </div>
 <div class="tab">
 <input type="radio" id="tab-2" name="tab-group-1">
 <label for="tab-2" style="cursor:pointer;">ZORNET.RU 2</label>
 <div class="tab-content">
 <img src="https://image.prntscr.com/image/GiK76aLNQNm1bOMKpT86qw.png" />
 </div>
 </div>
 <div class="tab">
 <input type="radio" id="tab-3" name="tab-group-1">
 <label for="tab-3" style="cursor:pointer;">ZORNET.RU 3</label>
 <div class="tab-content">
 <iframe width="360" height="250" src="//www.youtube.com/embed/iDjyjWxUrQc" frameborder="0" allowfullscreen></iframe>
 </div>
 </div>
</div>

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