JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.0.min.js"></script>
<div>
    <label> Label</label>
    <input type="radio"/>
    <div class="radio">
        <div class="radioSwitch"> </div>
    </div>
</div>

<div>
    <label> Label</label>
    <input type="radio"/>
    <div class="radio">
        <div class="radioSwitch"> </div>
    </div>
</div>

<div>
    <label> Label</label>
    <input type="radio"/>
    <div class="radio">
        <div class="radioSwitch"> </div>
    </div>
</div>

CSS

.radio {
    width:50px;
    height:25px;
    border-radius:40px;
    
    padding:0;
    margin:0;
    background:white;
    box-shadow:inset 0 0 3px #999;
    /* border:1px solid #999; */
    position:relative;   
}
.radioSwitch {
    width:23px;
    height:23px;
    border-radius:50px;
    
    position:absolute;
    top:0;
    left:-1px;
    padding:0;
    margin:0;
    display:block;
    content:" ";
    background: #fff;
    border:1px solid #777;
    
}

JavaScript

$('.radio').click(function(){
  //alert('waiting on a heartbeat, is anybody listening');
    
    
    if ($(this).find('.radioSwitch').css('left') === "-1px") {
        $(this).children('.radioSwitch').animate({ left: '26px' }, 600, 'easeInOutQuint');
    $(this).animate({ backgroundColor: '#4CCE4E' }, 600);
        $(this).siblings('input').prop('checked', true);   
    } else {
           $(this).children('.radioSwitch').animate({ left: '-1px' }, 600, 'easeInOutQuint');
    $(this).animate({ backgroundColor: '#ffffff' }, 600);
        $(this).siblings('input').prop('checked', false);   
    };
   



                  });