JSFiddle - React, Tailwind, and code Playground

HTML

<section class="tabs">
  
  <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  <label for="tab-1" class="tab-label-1" id="z1">Первая</label>


  <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  <label for="tab-2" class="tab-label-2" id="z2">Вторая</label>


  <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  <label for="tab-3" class="tab-label-3" id="z3">Третья</label>


  <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  <label for="tab-4" class="tab-label-4" id="z4">Четвертая </label>


  
  <div class="content">
      
    <div class="content-1">
      <p>1-я вкладка</p>
    </div>

    <div class="content-2">
      <p>2-я вкладка</p>
    </div>   

    <div class="content-3">
      <p>3-я вкладка</p>
    </div>

    <div class="content-4">
      <p>4-я вкладка</p>
    </div>
      
  </div>
  
</section>

<select name="name1" onchange="vahtaChange(this)" id="selectId">
      	<option disabled="" selected="">Категории стикеров</option>
        <option value="t1">Первая</option>
        <option value="t2">Вторая</option>
        <option value="t3">Третья</option>
        <option value="t4">Четвертая</option>
    </select>
<p>Вы на вкладке <b><span id="text">0</span></b></p>

CSS

.tabs {
  position: relative;
}

.tabs input {
  position: absolute;
  z-index: 1000;
  left: 0px;
  top: 0px;
  opacity: 0;
}

.tabs label {
  position: relative;
  display: block;
  padding: 1.4em;
  float: left;
  background: #27ae60;
  color: #145b32;
  text-align: center;
  cursor: pointer;
}

.tabs label:after {
  content: '';
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  display: block;
}

.tabs label:first-of-type {
  z-index: 4;
}

.tab-label-2 {
  z-index: 3;
}

.tab-label-3 {
  z-index: 2;
}

.tab-label-4 {
  z-index: 1;
}

.tabs input:checked + label {
  background: #fff;
  z-index: 6;
}

.content {
  position: relative;
  width: 100%;
  height: 200px;
  z-index: 5;
  overflow: hidden;
  background: #fff;
}

.content div {
  position: absolute;
  top: 0;
  padding: 1.4em;
  z-index: 1;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
  transform: translateX(4.2em);
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
  transform: translateX(0px);
  z-index: 100;
  opacity: 1;
  transition: all ease-out 0.2s 0.1s;
}

.content div h2,
.content div h3 {
  margin: 0 0 0.7em;
  color: #27ae60;
}

@keyframes "page" {
  0% {
    left: 0;
  }
  50% {
    left: 4.2em;
  }
  100% {
    left: 0;
  }
}

JavaScript

function vahtaChange(combo){
   if(combo.value == 't1'){
   document.getElementById('z1').style.display = 'block';
   document.getElementById('z2').style.display = 'none';
   document.getElementById('z3').style.display = 'none';
   document.getElementById('z4').style.display = 'none'; 
   }
  
   if(combo.value == 't2'){
   document.getElementById('z1').style.display = 'none';
   document.getElementById('z2').style.display = 'block'; 
   document.getElementById('z3').style.display = 'none'; 
   document.getElementById('z4').style.display = 'none';  

   }
  
   if(combo.value == 't3'){
   document.getElementById('z1').style.display = 'none';
   document.getElementById('z2').style.display = 'none'; 
   document.getElementById('z3').style.display = 'block'; 
   document.getElementById('z4').style.display = 'none';
 

   }
     
   if(combo.value == 't4'){
   document.getElementById('z1').style.display = 'none';
   document.getElementById('z2').style.display = 'none'; 
   document.getElementById('z3').style.display = 'none';    
   document.getElementById('z4').style.display = 'block'; 
 

   }

$(document).ready(function() {
    $("#selectId").change(function() {
        $("#text").text($("#selectId option:selected").text());
    });
});
}