JSFiddle - React, Tailwind, and code Playground

by Vedanta Barooah

HTML

<div class="onoff">
    <input type="checkbox" name="onoff" class="onoff-checkbox" id="myonoff" checked>
    <label class="onoff-label" for="myonoff"> <span class="onoff-inner"></span>
 <span class="onoff-switch"></span>

    </label>
</div>
<br/>
<div class="onoff2">
    <input type="checkbox" name="onoff" class="onoff-checkbox2" id="myonoff" checked>
    <label class="onoff-label2" for="myonoff"> <span class="onoff-inner2"></span>
 <span class="onoff-switch2"></span>

    </label>
</div>

CSS

div[class*="onoff"] {
        position: relative;
        width: 90px;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select: none;
    }
    input[class*="onoff-checkbox"] {
        display: none;
    }
    label[class*="onoff-label"] {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #999999;
        border-radius: 20px;
    }
    span[class*="onoff-inner"] {
        display: block;
        width: 200%;
        margin-left: -100%;
        -moz-transition: margin 0.3s ease-in 0s;
        -webkit-transition: margin 0.3s ease-in 0s;
        -o-transition: margin 0.3s ease-in 0s;
        transition: margin 0.3s ease-in 0s;
    }
    span[class*="onoff-inner"]:before, span[class*="onoff-inner"]:after {
        display: block;
        float: left;
        width: 50%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    span[class*="onoff-inner"]:before {
        content:"Yes";
        padding-left: 10px;
        background-color: #34A7C1;
        color: #FFFFFF;
    }
    span[class*="onoff-inner"]:after {
        content:"No";
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }
    span[class*="onoff-switch"] {
        display: block;
        width: 18px;
        margin: 6px;
        background: #FFFFFF;
        border: 2px solid #999999;
        border-radius: 20px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 56px;
        -moz-transition: all 0.3s ease-in 0s;
        -webkit-transition: all 0.3s ease-in 0s;
        -o-transition: all 0.3s ease-in 0s;
        transition: all 0.3s ease-in 0s;
    }
   ...