JSFiddle - React, Tailwind, and code Playground

HTML

<input id="1" type="checkbox"/>
<label for="1">Checkbox1</label>

<input id="2" type="checkbox"/>
<label for="2">Checkbox2</label>

<input id="3" type="checkbox"/>
<label for="3">Checkbox3</label>

<input id="4" type="checkbox"/>
<label for="4">Checkbox4</label>

<input id="5" type="checkbox"/>
<label for="5">Checkbox5</label>

CSS

input[type="checkbox"] {
                display: none;
              }

input[type="checkbox"] + label {
                  cursor: pointer;
              }

input[type="checkbox"] + label::before {
                content: "";
                display: inline-block;
                width: 48px;
                height: 48px;
                background: url('http://png.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png') no-repeat;
                margin: 4px 10px 0 0;
            }


input[type="checkbox"]:checked + label::before{
                  background: url('http://png.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png') no-repeat;
                 }