JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrap'>
            <ul>
                <li>
                    <label for='chkbx'>Firefox is the best</label>
                    <div class='togglebox'>
                        <input type='checkbox' id='chkbx'>
                        <label for='chkbx'><b></b></label>
                    </div>
                </li>
                <li>
                    <label for='chkbx2'>Click this text</label>
                    <div class='togglebox'>
                        <input type='checkbox' id='chkbx2' checked='false'>
                        <label for='chkbx2'><b></b></label>
                    </div>
                </li>
                <li>
                    <label for='chkbx3'>CSS3 is awesome</label>
                    <div class='togglebox'>
                        <input type='checkbox' id='chkbx3'>
                        <label for='chkbx3'><b></b></label>
                    </div>
                </li>
            </ul>
        </div>

CSS

/*Toggle Styles - Not Showing Correctly in Chrome! */

.togglebox{
    display:inline-block;
    border:1px solid #AAA;
    width:90px;
    height:30px;
    position:relative;
    border-radius:20px;
    color:#FFF;
    font-weight:700;
    overflow:hidden;
    box-shadow:0 1px 0 #FFF;
}

.togglebox label{
    width:200%;
    height:100%;
    line-height:30px;
    border-radius:.4em;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    font-size:1.1em;
    cursor:pointer;
    -webkit-transition:.12s;
    -moz-transition:.12s;
    transition:.12s;
}

.togglebox span{
    position:absolute;
    right:-100px;
}

.togglebox label::before{
    content:'ON';
    width:62px;
    float:left;
    margin-right:-16px;
    padding-right:13px;
    text-align:center;
    background:#007FEA;
    text-shadow:0 -1px 0 #093B5C;
    box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset;
}

.togglebox label b{
    display:block;
    height:100%;
    width:30px;
    float:left;
    position:relative;
    z-index:1;
    border:1px solid #AAA;
    background:#F6F6F6;
    box-shadow:0 4px 0 -2px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5);
    border-radius:20px;
}

.togglebox label:hover b{
    background:#E5E5E5;
}

.togglebox label::after{
    content:'OFF';
    width:62px;
    float:left;
    margin-left:-15px;
    padding-left:13px;
    text-align:center;
    color:#999;
    background:#FFF;
    box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset;
}

.togglebox input:checked ~ label{
    left:-60px;
}

/*Demo Styles */

*{ padding:0; margin:0; }
            html, body{ height:100%; }
            body{ font:14px/1 Arial; color:#333; background-color:#EEE; -webkit-font-smoothing:antialiased; }
            .wrap{ height:100%; margin:0 auto; text-align:center; }
            .wrap::before{ content:''; display:inline-block; height:100%; vertical-align:middle; }
            ul{ margin:0; padding:0; list-style:none; display:inline-block; width:300px; text-align:left;...