JSFiddle - React, Tailwind, and code Playground

by Mecrano

HTML

<div class="checkbox-1">
        <input type="checkbox" id="ejemplo-1" value="1" name="" />
        <label for="ejemplo-1"></label>
    </div>

CSS

input[type=checkbox] {
  visibility: hidden;
  width:15px;
  height:15px;
}
.checkbox-1 {
  display: inline-block;
  vertical-align: middle; 
    width: 15px;
    height: 15px;
    background: #ededed;
    margin-left: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.checkbox-1 label {
    background: white;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.checkbox-1 input[type=checkbox]:checked + label {
    background: red;
    border: 5px solid white;
    width: 5px;
    height:5px;
    top: 0px;
    left: 0px;
}