JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <h1>Animasi Checkbox</h1>
    <ul>
        <li>
            <input type="checkbox" name="notepad" id="notepad" />
            <label for="notepad">Notepad</label>
        </li>
        <li>
            <input type="checkbox" name="sb" id="sb" />
            <label for="sb">Sublime Text</label>
        </li>
        <li>
            <input type="checkbox" name="notepad+" id="notepad+" />
            <label for="notepad+">Notepad++</label>
        </li>
        <li>
            <input type="checkbox" name="txtmate" id="txtmate" />
            <label for="txtmate">Dreamweaver</label>
        </li>
    </ul>
</div>

CSS

* {margin: 0; padding: 0;}
body {background-color: #E4DFDD; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif}
.wrapper {width: 400px; margin: 50px auto;}
.wrapper h1 {color: #333; margin-bottom: 20px;}

/*Style Animasi Checkbox*/
input[type="checkbox"] {
    display:none
}
ul li {
    list-style:none;
    margin:10px auto 10px 10px;
    font-family:'Lato';
    position:relative
}

ul li:after {
    content:'';
    position:absolute;
    width:35px;
    height:35px;
    border:4px solid #fff;
    border-radius:6px;
    left:-12px;
    z-index:-1
}
label {
    cursor:pointer;
    color:#333;
    margin:5px 0;
    padding-left:40px;
    position:relative;
    font-size:30px;
    -webkit-transition:.2s linear;
    -moz-transition:.2s linear;
    -o-transition:.2s linear;
    transition:.2s linear
}
label:before,label:after {
    content:'';
    left:11px;
    width:3px;
    bottom:0;
    background:#15C65F;
    position:absolute;
    top:4px;
}
label:before {
    transform:rotate(45deg);
    transform-origin:0 14px;
    height:0;
    -webkit-transition:.2s linear;
    -moz-transition:.2s linear;
    -o-transition:.2s linear;
    transition:.2s linear
}

label:after {
    transform:rotate(-45deg);
    transform-origin:0 20px;
    height:0;
    -webkit-transition:.2s linear .2s;
    -moz-transition:.2s linear .2s;
    -o-transition:.2s linear .2s;
    transition:.2s linear .2s
}
input[type="checkbox"]:checked + label:after,input[type="checkbox"]:checked + label:before {
    height:100%
}

input[type="checkbox"]:checked + label {
    color:#fff
}