JSFiddle - React, Tailwind, and code Playground

by hrabinowitz

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked
><label for="toggle-on" class="btn">On</label
><input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio"
><label for="toggle-off" class="btn">Off</label><input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio"
><label for="toggle-off" class="btn">Off</label>

CSS

input[type="radio"].toggle {
    display: none;
}

input[type="radio"].toggle:checked + label {
    background-image: -moz-linear-gradient(bottom,#969696,#727272);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#969696),#727272);
    background-image: -webkit-linear-gradient(bottom,#969696,#727272);
    background-image: -o-linear-gradient(bottom,#969696,#727272);
    background-image: linear-gradient(to top,#969696,#727272);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff969696',endColorstr='#ff727272',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 6px 0 rgba(41, 41, 41, 0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: default;
    color: #E6E6E6;
    border-color: transparent;
    text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
}

input[type="radio"].toggle + label {
    width: 3em;
    border: 1px solid black;
}

input[type="radio"].toggle:checked + label.btn:hover {
    background-color: inherit;
    background-position: 0 0;
    -webkit-transition: none;
    -moz-trainsition: none;
    transition: none;
}

input[type="radio"].toggle-left + label {
    border-right: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-top-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

input[type="radio"].toggle-right + label {
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-top-left-radius: 0;
    -moz-border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}