JSFiddle - React, Tailwind, and code Playground

by Joe Young

HTML

<div class="switch-div">
    <input id="sw" class="ios-switch" type="checkbox">
    <label for="sw"></label>
</div>

CSS

.ios-switch {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.ios-switch + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}
input.ios-switch + label {
    padding: 2px;
    width: 90px;
    /* width of container*/
    height: 25px;
    background-color: #dddddd;
    /*border-radius: 60px;*/
    transition: background 0.4s;
}
input.ios-switch + label:before, input.ios-switch + label:after {
    display: block;
    position: absolute;
    content:"";
}
input.ios-switch + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #fff;
    /*border-radius: 60px;*/
    transition: background 0.4s;
}
input.ios-switch + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 42px;/* width of switch in middle */
    background-color: #dddddd;
    /*border-radius: 52px;*/
    transition: margin 0.4s, background 0.4s;
    content:'textbook';
}
input.ios-switch:checked + label {
    background-color: #8ce196;
}
input.ios-switch:checked + label:after {
    margin-left: 44px;
    background-color: #8ce196;
    content:'edexcel';
}
label:after {
    text-align: center;
    line-height: 22px;
    font-family: Open Sans;
    font-size: 9px;
}