JSFiddle - React, Tailwind, and code Playground

HTML

<article class='base'>
    
    <span class="checkbox"><input type="checkbox" /></span>
    
</article>


<table style="width:100%">
    <tr>
        <td>Normal:</td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" checked="checked" /></td>
        <td><input type="checkbox" disabled="disabled" /></td>
        <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
    </tr>
    <tr>
        <td>Small:</td>
        <td><input type="checkbox" class="myinput" /></td>
        <td><input type="checkbox" checked="checked" class="myinput" /></td>
        <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
        <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
    </tr>
    <tr>
        <td>Large:</td>
        <td><input type="checkbox" class="myinput large" /></td>
        <td><input type="checkbox" checked="checked" class="myinput large" /></td>
        <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
        <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
    </tr>
    <tr>
        <td>Custom icon:</td>
        <td><input type="checkbox" class="myinput large custom" /></td>
        <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
        <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
        <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
    </tr>
</table>

CSS

.base{
     background: black;
     color: #fff:
}
.base input{
    height:50px; 
    width: 50px;
}
span.checkbox{
    border: 1px solid blue;
    display: inline-block;
}
.base span.checkbox::before{   
    content: "";
    border: 1px solid red;

}
.base span.checkbox::after{   
    content: "";
    border: 1px solid red;
}

/* Main Classes */
body{
    color: #fff;
    background-color: #1a1f26;
}
.myinput[type="checkbox"]::before{
    position: relative;
    display: block;

    border: 1px solid #293442;
    content: "";
    background: #1a1f26;
}
.myinput[type="checkbox"]::after{
    position: relative;
    display: block;

   border-width: 1px;
    border-style: solid;
    border-color: red; 
    content: "";   
} 
 .myinput[type="checkbox"]:checked::after{
    content: "\2713";
    color: #fff;  
    font-size: 18px;
}


/* Large checkboxes */
.myinput.large{
    height:22px; 
    width: 22px;
}

.myinput.large[type="checkbox"]::before{
    width: 25px;  
    height: 25px;  
}
.myinput.large[type="checkbox"]::after{
    top: -25px; 
    left: 7px; 
    width: 25px; 
    height: 25px;  
}

JavaScript

$(function(){
    $('input').change(function(){
       $('div').html(Math.random()); 
    });
});