JSFiddle - React, Tailwind, and code Playground

by Madmartigan

HTML

<div>
    <label><input type="checkbox">Option 1</label>
    <label><input type="checkbox">Option 2</label>
    <label><input type="checkbox">Option 3</label>
</div>

CSS

div {
     width: 270px;
     /*height: 120px;*/
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     background: #a2bdd8;
}

label{display:block;
font:18px arial;
    color:#ddd;
    cursor:pointer;
    padding:.5em;
}
input[type="checkbox"]{
 margin:1em;
  visibility:hidden;
}

label.selected{
    color:#fff;
}

label.selected input{
    visibility:visible;
    /* use a bg image here for the label IRL instead */
    /* just did this for a demo */
}

JavaScript

$("input:checkbox").live('change', function () {
        if ($(this).is(':checked')) {
            $(this).parent().addClass('selected');
        } else {
            $(this).parent().removeClass('selected');
        }
    });