JSFiddle - React, Tailwind, and code Playground

by Egor Jsfiddle

HTML

<div><span>
  <input type="checkbox" id="check1">
  <label for="check1">Bug #120</label>
</span>
  <span>
  <input type="checkbox" id="check2" checked>
  <label for="check2">Bug #121</label>
</span>
  <span>
  <input type="checkbox" id="check3">
  <label for="check3">Bug #122</label>
</span>
  <span>
  <input type="checkbox" id="check4">
  <label for="check4">Bug #123</label>
</span>
  <span>
  <input type="checkbox" id="check5">
  <label for="check5">Bug #124</label>
</span>
  <span>
  <input type="checkbox" id="check6">
  <label for="check6">Bug #125</label>
</span>
</div>

SCSS

* {
  /* border: 1px solid; */
}

div {
  margin: 50px auto;
  width: 150px;
  span {
    font: 1.3em  Arial, sans-serif;
    color: grey;
    display: inline-block;
    width: 100%;
    margin: 0 0 20px 0;
    label {
    padding: 50px 0;}
  }
}

input[type=checkbox] + label {
  cursor: pointer;
  user-select: none;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  padding: 0 0 0 60px;
  position: relative;
}

input[type=checkbox] + label:before {
  position: absolute;
  content: '';
  top: 1px;
  left: 0;
  width: 50px;
  height: 20px;
  border-radius: 50px;
  background: silver;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4);
   -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

input[type=checkbox] + label:after {
  position: absolute;
  content: '';
  top: -4px;
  left: -5px;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: #D9F997;
  
   -webkit-box-shadow: 1px 2px 4px 0px rgba(0,0,0,.3);
  -moz-box-shadow: 1px 2px 4px 0px rgba(0,0,0,.3);
  box-shadow: 1px 2px 4px 0px rgba(0,0,0,.3);
  
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

input[type=checkbox]:checked + label:after {
  left: 24px;
  background: #fff;
  
  -webkit-box-shadow: -1px 2px 4px 0px rgba(0,0,0,.3);
  -moz-box-shadow: -1px 2px 4px 0px rgba(0,0,0,.3);
  box-shadow: -1px 2px 4px 0px rgba(0,0,0,.3);
}

input[type=checkbox]:checked + label:before {
  background: lightgreen;
}

input[type=checkbox] + label:click:after {
  background: #000;
}

JavaScript

/*function rndm() {
  setInterval(console.log(rand + " random"), 1000);
}*/

var rnd = Math.floor(Math.random() * 6);
var rnd_b;

var lbl = document.getElementsByTagName("label");
var npt = document.getElementsByTagName("input");
//alert(npt[1].checked);

/*console.log(rnd);
$(npt[rnd]).on('click', npt.checked, function() {
	console.log(lbl[rnd].innerHTML);
})	*/

//document.getElementById("rslt").innerHTML = "рандом = #12" + rnd; 

  $(npt).on('click', function() {
    //console.log("Был " + rnd);
    //while(this == rnd)
    //while (rnd != rnd_b)
    /*while (rnd == rnd_b) {
    	console.log("while(" + rnd + " == " + rnd_b + ")"); 
    	rnd = Math.floor(Math.random() * 6);
    	console.log("rnd = " + rnd + " rnd_b = " + rnd_b); 
      return rnd;
    }*/
    npt[rnd].checked = true;
    rnd_b = rnd;
    rnd = Math.floor(Math.random() * 6);
    while(rnd == rnd_b) {
    console.log(rnd_b + "==" + rnd);
    	rnd = Math.floor(Math.random() * 6);
      console.log(rnd_b + "!=" + rnd + "............................................");
    }
  });