JSFiddle - React, Tailwind, and code Playground

by Alexey Ukolov

HTML

<form>
  <input id="check" type="checkbox">
  <label class="for-check" for="check"></label>
  <div class="box">
    <div class="stop"></div>
    <p class="btn">accept</p>
  </div>
  
</form>

CSS

#check {opacity:0;}
.for-check {
  display:block;
  width:30px;
  height:30px;
  background-color:gray;
}
.box {
  position:relative;
  width:100px;
  height:20px;
}
.btn {
  width:100%;
  height:100%;
  background-color:gray;
  cursor:pointer;
}
.stop {
  position:absolute;
  z-index:5;
  width:100%;
  height:100%;
  background-color:black;
  opacity:0.5;
}
.btn:hover {color:red;}
#check:checked + .for-check {
  background-color:red;
}
#check:checked ~ .box .stop {
  display:none;
}