JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<input type="checkbox" id="button" />
<label for="button" onclick>click</label>

<div>Change my color!</div>

CSS

* {
   box-sizing:border-box; 
}

/* Advanced Checkbox Hack */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

label { 
  cursor: pointer;
  user-select:none;
}

/* styling */
label {
    display:inline-block;
    background:#ccc;
    margin:3em;
    padding:2em;
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   background: red;
}

input[type=checkbox]:checked ~ label {
   background: blue; 
}