JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<span class="switchradio swbox">
  <label>
    <input type="radio" name="test1" value="1"  checked="checked" />
    <span><label>Да</label></span>
    </label>
  <label>
    <input type="radio" name="test1" value="0" />
    <span><label>Нет</label></span>
  </label>
</span>

CSS

/*SWITCH RADIO */
.switchradio,
.switchradio input,
.switchradio label input + span,
.switchradio label input + span label,
.switchradio label input:checked + span label,
.switchradio label input[value="1"]:checked + span,
.switchradio label input[value="0"]:checked + span{
    position: absolute;
    vertical-align: middle;
    width:60px;
    height:20px;
    cursor: pointer;
    font-size: 14px;
}
.switchradio label input + span label{
    overflow: hidden;
    line-height:20px;
    text-align: center;
}
.switchradio,
.switchradio input,
.switchradio label input + span{
    position: absolute;
    box-shadow:
        0 0 0 2px rgba(40, 40, 40, 0.04) inset,
        0 0 4px rgba(40, 40,40, 0.3) inset,
        0 5px 4px 1px rgba(40, 40, 40, 0.25) inset,
        0 27px 0 rgba(40, 40, 40, 0.07) inset;
}
 
.switchradio label input + span{
    top:0px;
}
.switchradio{
    position:relative;
    display:inline-block;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.switchradio input{
    top:-4px; left:0;
    opacity: 0;
    z-index:1;
}
.switchradio input:checked{
    z-index:0;
}
.switchradio label input[value="1"] + span label{
    text-indent: -10px; 
    color:#eee;
    text-shadow: 0 -1px 0 #355;
}
.switchradio label input[value="0"] + span label{
    text-indent: 15px; 
    color:#555;
    text-shadow: 0 1px 0 #ffffff;
}
.switchradio label input[value="1"] + span{
    background: #369AEE;  
}
.switchradio label input[value="0"] + span{
     background: #f5f5f5;  
}
.switchradio label input[value="0"]:checked + span{
    left:0px;
}
.switchradio label input[value="1"]:checked + span{
    right:0px;
}
.switchradio label input + span label{
    width:0px; 
}
.switchradio label input + span{
    width:18px;
}
.switchradio label input[value="0"] + span{
    left:42px;  
}
.switchradio label input[value="1"] + span{
    right:42px;  
}
.switchradio label input + span label,
.switchradio label input:checked + span label,
.switchradio...