JSFiddle - React, Tailwind, and code Playground

by CJBrewer

HTML

<div id="ck-button">   
       <input type="checkbox" value="1"><span><div class='imgdiv'/>
           <label>red</label>
</div>

CSS

div#ck-button > label
{
    
    height: 200px;
    width:200px;

}

div.imgdiv {
background-image: url(http://assets.servedby-buysellads.com/p/manage/asset/id/23314);
    
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50px 50px;    
    
    
    height: 100px;
    width:100px;

}

body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
  //  width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}