JSFiddle - React, Tailwind, and code Playground

by PaijoPapua

HTML

<div class="container">
  <div class="tabs">
    <div class="lblUk">
			<label for="m25" class="lblUk-a uks uk1">M/25</label>
      			<input type="checkbox" class="ckbox ck_m25" id="m25" onchange='check(this)'/>
      
			<label for="s40" class="lblUk-b uks uk2">S/40</label>
      			<input type="checkbox" class="ckbox ck_s40" id="s40" onchange='check(this)'/> 
      
			<label for="x21" class="lblUk-c uks uk3">X/21</label>
      			<input type="checkbox" class="ckbox ck_x21" id="x21" onchange='check(this)'/>
      
			<label for="l45" class="lblUk-d uks uk4">L/45</label>
      			<input type="checkbox" class="ckbox ck_l45" id="l45" onchange='check(this)'/>
      <div class="ct-box">
        <div class="ct-a">a ct</div>
        <div class="ct-b">b ct</div>
        <div class="ct-c">c ct</div>
        <div class="ct-d">d ct</div>
      </div>
    </div>
  </div>
</div>

CSS

.tabs{width:100%;}
label{z-index:10;position:relative;height:30px;background:#fff;cursor:pointer;padding:5px 10px;border:1px solid #dedede;}
.ct-box {text-align:left;}
.ct-a,.ct-b,.ct-c,.ct-d,.ckbox{display:none;}
.ck_m25:checked ~ .ct-box .ct-a{display:block;}
.ck_s40:checked ~ .ct-box .ct-b{display:block;}
.ck_x21:checked ~ .ct-box .ct-c{display:block;}
.ck_l45:checked ~ .ct-box .ct-d{display:block;}

JavaScript

function check(element){
    if(element.checked){
      var checkboxes = document.getElementsByClassName('ckbox');
        for(var i=0;i<checkboxes.length;i++){
           if(checkboxes[i]!=element)
             checkboxes[i].checked = false;
        }
    }
}