JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="change"/>
<div id="main">
<div id="content">
<label for="change"></label>
    <h2>hello</h2>
</div>
</div>

CSS

#main{
  width:100px;
  height:100px;
  background:red;
  text-align:center;
}
input{
    display:none;
}
input:checked ~ #main{
    border:2px solid green;
    font-size:24px;
    background:yellow;
}
input:checked ~ #main label{
    background:url(http://farm6.static.flickr.com/5182/5840005274_b3bcc52bb1_o.png);
}


label{
    background:url(http://farm3.static.flickr.com/2793/5839457953_1690178a65_o.png);
    display:block;
    width:18px;
    height:18px;
}