JSFiddle - React, Tailwind, and code Playground

HTML

<p class="radiogroup group3">
   <a href="#" class="radiobtn current first-child">
       <span id="value_4">Эконом</span>
    </a>
    <a href="#" class="radiobtn">
        <span id="value_5">Бизнес</span>
    </a>
    <a href="#" class="radiobtn">
        <span id="value_6">Первый</span>
    </a>
    <a href="" class="bg"></a>
    <a href="" class="knob"></a>
</p>

CSS

.radiogroup{
    font-size: 0px;
    letter-spacing:-4px;
    background-color: #f0f3f6;
    position: relative;

    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;

    -webkit-box-shadow:0 1px 0 #fff, inset -1px 1px 0 #cccfd1;
    -moz-box-shadow:0 1px 0 #fff, inset -1px 1px 0 #cccfd1;
    box-shadow:0 1px 0 #fff, inset 0px 1px 0 #cccfd1;
    vertical-align: top;
}.radiogroup a{
    position: relative;
    z-index:8;
}
.lastrow .radiogroup.group3{
    background: url(../images/radiobtn_divider.png) 0 1px repeat-x;
}
.radiogroup.group3 .radiobtn,
.radiogroup.group3 .bg{
    width: 33.3%;
}
.radiogroup .bg{
    height: 100%;
}
.radiogroup.group3 .knob{
    height: 100%;
    width: 33.3%;
    position: absolute;
    z-index:20;
    cursor:move;
}
.radiogroup.group2 .knob{
    height: 100%;
    width: 50%;
    position: absolute;
    z-index:20;
    cursor:move;
}
.radiogroup.group2 .radiobtn{
    width: 50%;
}
.radiogroup.group2 .bg{
    width: 50%;
}
.radiogroup .radiobtn{
    letter-spacing:normal;
    display: inline-block;
    text-align: center;
    color: #7d8a93;
    font-weight: bold;
    margin-top: 0;
    font-size: 12px;
    text-shadow: 0 1px 0 #fff;
    padding:8px 0 9px;
    line-height: 10px;
    position: relative;
}
.radiogroup .bg{
    background:#146ccc url(../images/radiobtnbg.png) repeat-x;
    background-position: 0 -27px;
    color: #fff;
    text-shadow: 0 -1px 0 #054b86;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow:0 1px 0 #ccced0;
    -moz-box-shadow:0 1px 0 #ccced0;
    box-shadow:0 1px 0 #ccced0;    
}
.radiogroup .bg{
    position: absolute;
    display:block;
    z-index:3;
    left:0;
    top: 0;
}
.radiogroup .knob{
    left:0;
    top: 0;
}
.radiogroup a.current{
    color:#fff;
    text-shadow:none;
    text-decoration:none;
}

JavaScript

/*
    LAVALAMP-эффект
*/
jQuery.fn.Lavalamp = function(userOptions) {
    var box = $(this);
    var knob = box.find('.knob');
    var bg = box.find('.bg');
    var valueNode = box.next();
    var options = {
        // nope
    };
    $.extend(options, userOptions);
    
    var LI = box.find('a:first-child');
    var step = parseInt(LI.css('width')) + parseInt(LI.css('margin-left')) - 1;
    
    $().ready(function() {
        box.find('a').each(function(index){
            var handle = $(this);
            var handle_span = $(this).children('span');
            handle.click(function(e){
                e.preventDefault();
                var value = handle_span.attr('id').replace('value_', '');
                knob.animate({
                    'left': parseInt((step * index) + 1) + 'px'
                }, 250, 'linear', function(){
                    if (eval("typeof " + options.onComplete + " == 'function'")) {
                        options.onComplete(value);
                    }
                });
                bg.animate({
                    'left': parseInt((step * index) + 1) + 'px'
                });
                box.find('a').removeClass('current');
                handle_span.parent().addClass('current');
                valueNode.val(value);
            });
            handle.focus(function(e){
                this.blur();
            });
        });
        
        knob.draggable({
            axis: 'x',
            containment: box,
            drag: function(){
                var left = knob.position().left;
                var num = Math.floor(left / step);
                bg.css('left', left);
                var left = left + Math.floor(step / 2);
                var num = Math.floor(left / step);
                box.find('a').removeClass('current');
                box.find('a').eq(num).addClass('current');
            },
            stop: function(){
                var left = knob.position().left + Math.floor(step / 2);
      ...