JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<label>
    <input type="checkbox" /><i></i>
    Hello
</label>

<label>
    <input type="checkbox" /><i></i>
    Take it easy
</label>

<label>
    <input type="checkbox" /><i></i>
    Take it easy
</label>

<label>
    <input type="checkbox" checked /><i></i>
    Whats up
</label>

<br/>

<label>
    <input name="good" type="radio" /><i></i>
    Select me
</label>

<label>
    <input name="good" type="radio" checked /><i></i>
    Select It
</label>

<label>
    <input name="good" type="radio" /><i></i>
    Hello
</label>

SCSS

label {
    input {
        display: none;
    }
    i {
        display: inline-block;
        width: 10px; height: 10px;
        background: #ccc;
    }
    input[type="checkbox"] + i {
        
    }
    input[type="radio"] + i {
        border-radius: 50%;
    }
    &:hover {
        input[type="checkbox"] + i {
            background: yellow;
        }
        input[type="radio"] + i {
            background: yellow;
        }
    }
    input[type="checkbox"]:checked + i {
        background: red;
    }
    input[type="radio"]:checked + i {
        background: red;
    }
}