JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<span class="yt-uix-checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox">
    <label for="autoplay-checkbox" id="autoplay-checkbox-label">
      <span class="checked">&nbsp;</span>
 <span class="unchecked"></span>
 <span class="toggle">&nbsp;</span>

</label>
</span>

CSS

body, input {
    font-family: arial, sans-serif;
    font-size: 13px;
}
div, label, span {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    background: transparent;
}
.yt-uix-checkbox-on-off {
    position: relative;
    display: inline-block;
    width: 35px;
    padding-right: 2px;
    overflow: hidden;
    vertical-align: middle;
}
.yt-uix-checkbox-on-off input[type=checkbox] {
    position: absolute;
    opacity: 0;
}
.yt-uix-checkbox-on-off input[type=checkbox]:checked+label {
    background-color: #167ac6;
}
.yt-uix-checkbox-on-off label {
    display: inline-block;
    border: 1px solid transparent;
    height: 13px;
    width: 100%;
    background: #b8b8b8;
    cursor: pointer;
    border-radius: 20px;
}
.yt-uix-checkbox-on-off label .checked {
    display: none;
}
.yt-uix-checkbox-on-off input[type=checkbox]:checked+label .checked {
    display: inline-block;
    margin-top: 3px;
    margin-left: 6px;
    background: no-repeat url(//s.ytimg.com/yts/imgbin/www-hitchhiker-vflDqEBst.webp) -366px -390px;
    background-size: auto;
    width: 10px;
    height: 7px;
}
.yt-uix-checkbox-on-off label .unchecked {
    display: inline-block;
    float: right;
    padding-right: 3px;
}
.yt-uix-checkbox-on-off input[type=checkbox]:checked+label .unchecked {
    display: none;
}
.yt-uix-checkbox-on-off label .toggle {
    float: left;
    background: #fbfbfb;
    height: 13px;
    width: 13px;
    border-radius: 20px;
}
.yt-uix-checkbox-on-off input[type=checkbox]:checked+label .toggle {
    float: right;
}