JSFiddle - React, Tailwind, and code Playground

HTML

<section class="tabs">
  <!-- Panel 1 -->
  <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">
  Вкладка 1
  </label>

  <!-- Panel 2 -->
  <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  <label for="tab-2" class="tab-label-2" id="z2">
  Вкладка 2
  </label>

  <!-- Panel 3 -->
  <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  <label for="tab-3" class="tab-label-3" id="z3">
  Вкладка 3
  </label>

  <!-- Panel 4 -->
  <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  <label for="tab-4" class="tab-label-4"  style="display:none;" id="z4">
  Вкладка 4
  </label>

    <!-- Panel 5 -->
  <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
  <label for="tab-5" class="tab-label-5"  style="display:none;" id="z5">
    Вкладка 5
  </label>

    <!-- Panel 6 -->
  <input id="tab-6" type="radio" name="radio-set" class="tab-selector-6" />
  <label for="tab-6" class="tab-label-6"  style="display:none;" id="z6">
    Вкладка 6
  </label>
    <p class="custom-select">
    <select name="name1" onchange="categories(this)" id="selectId">
      	<option disabled="" selected="">Категории</option>
        <option value="t1" name="radio-set">Категория 1</option>
        <option value="t2">Категория 2</option>
        <option value="t3">Категория 3</option>
    </select>
</p><p style="left: 2%;  position: absolute;top: 81%; color: rgba(154, 154, 154, 0.6);">Вы в категории: <b><span id="text"></span></b></p>
  
 <div class="content">
      
   <div class="content-1"> 
   Вкладка 1                               
   </div>
   <div class="content-2"> 
   Вкладка 2
   </div>
   
   <div class="content-3"> 
   Вкладка 3
   </div>
   
   <div class="content-4"> 
   Вкладка 4
   </div>
   
   <div class="content-5"> 
   Вкладка 5
   </div>
   
   <div class="content-6"> 
   Вкладка 6
   </div>
  </div>
 ...

CSS

.custom-select {
right: 1%;
position: absolute;
top: 78%;
margin-top: 18px;

}
.custom-select select {
width: auto;
margin: 0;
padding: 8px;
outline: none;
cursor: pointer;
border: none;
border-radius: 0;
background-color: #e5e9ed;
color: rgba(154, 154, 154, 0.6);
-webkit-appearance: none;
-moz-appearance: none;
  width: 165px;
}
.custom-select select::-ms-expand {
  display: none;
}
.custom-select:after {
position: absolute;
top: 15px;
right: 1em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: .25em solid transparent;
border-right: .25em solid transparent;
border-top: 0.375em solid rgba(154, 154, 154, 0.6);
pointer-events: none;
}
}
.custom-select select {
    padding-right: 1.75em;
  }




/* 
* Tab
*/
.tabs {
  position: relative;
  background: #dce1e6;
  width: 505px;
  height:259px;
}

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

.tabs label {
  position: relative;
  display: block;
  padding: 5px;
  float: left;
  background: #dce1e6;
  text-align: center;
  cursor: pointer;
}


.tabs label:hover {
background-color: #e5e9ed;
}

.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: #ebeef2;
  z-index: 6;
}

.content {
  position: relative;
  width: 100%;
  height: 170px;
  z-index: 5;
  overflow: auto;
  overflow-x: hidden;
  background: #ebeef2;
}

.content div {
  position: absolute;
  top: 0;
  padding:10px;
  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,
.tabs input.tab-selector-5:checked ~ .content .content-5,
.tabs input.tab-selector-6:checked ~ .content...

JavaScript

function categories(combo){
    if(combo.value == 't1'){
   document.getElementById('z1').style.display = 'block';
   document.getElementById('z2').style.display = 'block';
   document.getElementById('z3').style.display = 'block';
   document.getElementById('z11').style.display = 'block'; 
   document.getElementById('z4').style.display = 'none';
   document.getElementById('z4').style.display = 'none';
   document.getElementById('z5').style.display = 'none';
   document.getElementById('z6').style.display = 'none'; 
   document.getElementById('z7').style.display = 'none'; 
   document.getElementById('z8').style.display = 'none';
   document.getElementById('z9').style.display = 'none'; 
   document.getElementById('z10').style.display = 'none';

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

   }
  
    if(combo.value == 't3'){
   document.getElementById('z1').style.display = 'none';
   document.getElementById('z2').style.display = 'none'; 
   document.getElementById('z3').style.display = 'none'; 
   document.getElementById('z4').style.display = 'none';
   document.getElementById('z5').style.display = 'block';
   document.getElementById('z6').style.display = 'block'; 
   document.getElementById('z7').style.display = 'block'; 
   document.getElementById('z8').style.display = 'block';
   document.getElementById('z9').style.display = 'block'; 
   document.getElementById('z10').style.display = 'block'; 

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

}