JSFiddle - React, Tailwind, and code Playground

HTML

<label>
    <input type="checkbox" />
    <span></span> My custom checkbox
</label>

<label>
    <input type="radio" name="radio" />
    <span></span>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</label>
<label>
    <input type="radio" name="radio" />
    <span></span>
    Lorem ipsum tempor invidunt ut labore et dolore magna aliquyam erat.
</label>

CSS

html, body {
    font-size: 14px;
    font-family: 'Open Sans';
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
    
/* Als erstes verstecken wir die Standard Form-Elemente */
input[type="checkbox"],
input[type="radio"] {
    display: none;
}

/* 
Dem Label gebe ich ein Display Block, 
damit dieser über die komplette Breite klickbar ist.
*/
label {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 25px;
}

/* Der span ist unsere neue Checkbox und den stylen wir wie folgt */
label span {
    background: #fff;
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 1px solid #eaeaea;
    
    /* 
    Die Positionierung kann je nach Einsatzgebiet abweichen.
    Ich möchte hier sichergehen das die Checkbox oder Radiobutton immer ob am Textanfang steht,
    falls wir einen mehrzeiligen Text haben, wie es z.B. bei "AGB´s akzeptieren" üblich ist.
    Die könnt ihr aber auch anders lösen.
    */
    position: absolute;
    top: 3px;
    left: 0;
    
    /* Ein Transition Effekt für den Hover - Checked Status. Dadurch wirkt es etwas animiert. */
    transition: all .2s linear;
}

/* Den Radiobutton runden wir komplett ab */
input[type="radio"] + span {
    border-radius: 50%;
}

/* Hover-Effekt */
label:hover span {
    border: 1px solid #bbb;
}

/* 
Mit dem "+" Selektor können wir das direkt nachfolgende Element
ansprechen, indem Fall unsere Label mit darin enthalten span.
*/
input[type="checkbox"]:checked + span,
input[type="radio"]:checked + span{
    border: 3px solid #8BC34A;
}