JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <div class="visual-checkbox-container">
            <input type="checkbox" class="simple-checkbox" name="simpleCheckbox" id="simpleCheckbox"  />
            <label class="visual-checkbox" for="simpleCheckbox">
                Check Me If You Dare !
            </label>
        </div>

CSS

.visual-checkbox-container {
   margin: 20% 5%;
}

.simple-checkbox {
    display: none;
}

.visual-checkbox {
    width: 11em;
    height: 50px;
    position: relative;
    display: inline-block;
    padding: 1.5em 0 0 0;
}

.visual-checkbox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    border-radius: 25%;
    box-shadow: .4px 1px 3px 0 rgba(154, 154, 154, 0.71) inset, -.5px -.4px 3px 0 rgba(154, 154, 154, 0.40) inset;
    background-color: #fff;
    width: 15px;
    height: 15px;
}

.visual-checkbox:focus:before , .visual-checkbox:hover:before {
    box-shadow: .5px .5px 2px 0 rgba(72, 217, 91, 0.70),  -.5px -.5px 2px 0 rgba(72, 217, 91, 0.70) , .2px .5px 3px 0 rgba(72, 217, 91, 0.90) inset, -.5px -.2px 3px 0 rgba(72, 217, 91, 0.90) inset;
}


.simple-checkbox:checked + .visual-checkbox:before {
    box-shadow: .5px .5px 2px 0 rgba(72, 217, 91, 0.76),  -.5px -.5px 2px 0 rgba(72, 217, 91, 0.76);
    background-color: rgba(78, 183, 91, 0.90);
}

.simple-checkbox:checked + .visual-checkbox:after {
    font-family: FontAwesome;
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 0;
    color:  #fff;
    font-size: .9em;
}