JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<div id='css-solution'>
    <h1>css solution</h1>
    <input class='checkbox' type='checkbox' name='check1'/><label for='check1'>check 1</label>
    <input class='checkbox' type='checkbox' name='check2'/><label for='check2'>check 2</label>
    <input class='checkbox' type='checkbox' name='check3'/><label for='check3'>check 3</label>
    <input class='checkbox' type='checkbox' name='check4'/><label for='check4'>check 4</label>
    <input class='checkbox' type='checkbox' name='check5'/><label for='check5'>check 5</label>
       <input class='checkbox' type='checkbox' name='js-check1'/><label for='js-check1'>check 1</label>
       <input class='checkbox' type='checkbox' name='js-check2'/><label for='js-check2'>check 2</label>
       <input class='checkbox' type='checkbox' name='js-check3'/><label for='js-check3'>check 3</label>
       <input class='checkbox' type='checkbox' name='js-check4'/><label for='js-check4'>check 4</label>
       <input class='checkbox' type='checkbox' name='js-check5'/><label for='js-check5'>check 5</label>
<button id='the-button'>I appeared!</button>
    </div>

CSS

.checkbox, label {
    display: block; 
    float: left;
}
.checkbox {
    clear: both;
}
.checkbox:checked + label {
    color: green;
}
button {
    display: block;
    clear: both;
    display: none;
}
.checkbox:checked ~ .checkbox:checked ~.checkbox:checked ~ .checkbox:checked~ .checkbox:checked ~ #the-button {
    display: block;
}
hr {
   clear: both;   
}