JSFiddle - React, Tailwind, and code Playground

by Pavel Kityan

HTML

<label class="my-custom-label">
    <input name="test" type="checkbox" />
    <span></span>
</label> 
<label class="my-custom-label">
    <input name="test" type="radio" />
    <span></span>
</label>
<label class="my-custom-label">
    <input name="test" type="radio" />
    <span></span>
</label>

CSS

.my-custom-label {
    display:inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #efefef;
    text-align: center;
}

.my-custom-label > input[type=radio] {
    display: none;
}

.my-custom-label > span {
    background: #fff;
    border: solid 4px #bbb;
    display:inline-block;
    width:10px;
    height: 10px;
    border-radius: 100%;
    vertical-align:middle;
}

.my-custom-label > input[type=checkbox]:checked + span {
    background: #0ff;
}