JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-checkbox">
    <label>
        <input type="checkbox" />
        <i></i>
        Hello World
    </label>
</div>

<div class="form-checkbox">
    <label>
        <input type="checkbox" />
        <i></i>
        Hello World
    </label>
</div>

<div class="form-checkbox">
    <label>
        <input type="checkbox" />
        <i></i>
        Hello World
    </label>
</div>

<div class="form-checkbox">
    <label>
        <input type="checkbox" />
        <i></i>
        Hello World
    </label>
</div>

CSS

.form-checkbox {
    margin-bottom: 10px;
}

.form-checkbox label {
    display: block;
    position: relative;
    overflow: hidden;
    padding-left: 25px;
}

.form-checkbox input {
    display: none;
}

.form-checkbox input + i {
    display: block;
    position: absolute;
    top: 0px; left: 0px;
    width: 14px; height: 14px;
    border: 2px solid red;    
}

.form-checkbox input:checked + i {
    display: block;
    position: absolute;
    top: 0px; left: 0px;
    width: 14px; height: 14px;
    border: 2px solid red;
    background: red;    
}