JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="bounds">
    <label>
        <input type="radio" name="toggle" /><span>On</span>
    </label>
    <label>
        <input type="radio" name="toggle" /><span>Off</span>
    </label>
</div>

CSS

body {
    font-family:sans-serif;
}
#bounds {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}
#bounds label {
    float:left;
    width:2.0em;
}
#bounds label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}
#bounds label input {
    position:absolute;
    top:-20px;
}
#bounds input:checked + span {
    color:#F7F7F7;
}
#bounds label:first-child input:checked + span {
    background-color:#060;
}
#bounds label:first-child + label input:checked + span {
    background-color:#600;
}