JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox">
<input type="checkbox" disabled>
<input type="radio">

CSS

input[type="radio"],
input[type="checkbox"] {
    height: 15px;
    width: 15px;
    vertical-align: middle;
    margin: 0 0.4em 0.4em 0;
    border: 1px solid #007dc6;
  
    -webkit-appearance: none;
    -webkit-transition: box-shadow 200ms;
  
}

/* border radius for radio*/
input[type="radio"] {
    -webkit-border-radius:100%;
    border-radius:100%;
}

/* border radius for checkbox */
input[type="checkbox"] {
    -webkit-border-radius:2px;
    border-radius:2px;
}

/* hover state */
input[type="radio"]:not(:disabled):hover,
input[type="checkbox"]:not(:disabled):hover {
    border-color:#007dc6;
    
}

/* active state */
input[type="radio"]:active:not(:disabled),
input[type="checkbox"]:active:not(:disabled) {
    border-color:#007dc6;
}

/* focus state */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline:none;
  
}

/* input checked border color */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
    border-color:#007dc6;
    background-color: #007dc6;
}

/* radio checked */
input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}

/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}

/* disabled input */
input:disabled {
opacity: .6;
box-shadow: none;
background: rgba(0, 0, 0, 0.1);
box-shadow:none;
}

/* style label for disabled input */
input:disabled + label {
opacity: .6;
cursor:default;
-webkit-user-select: none;
}