JSFiddle - React, Tailwind, and code Playground

by Steve Wellens

HTML

<div id="maindiv">
    <input type="checkbox" id="a" value="1">
    <label for="a">Every</label>
    <input type="checkbox" id="b" value="1">
    <label for="b">Good</label>
    <input type="checkbox" id="c" value="1">
    <label for="c">Boy</label>
    <input type="checkbox" id="d" value="1">
    <label for="d">Deserves</label>
    <input type="checkbox" id="e" value="1">
    <label for="e">Fudge</label>
</div>

CSS

#maindiv {
}
input[type=checkbox] + label {
    text-align: center;
    background: yellow;
    color: black;
    width: 10%;
    float: left;
}
input[type=checkbox]:checked + label {
    background: orange;
}
input[type=checkbox] + label + input {
    position: absolute;
    top: 50px;
}