JSFiddle - React, Tailwind, and code Playground

HTML

<div id="specialists">
                <div class="specialist" >Specialist1</div>
                <div class="specialist" >Specialist2</div>
                <div class="specialist" >Specialist3</div>
            </div>
            <div id="specialist_lists">
                <div class="specialist_pagecontent" >Specialist1 list</div>
                <div class="specialist_pagecontent" >Specialist2 list</div>
                <div class="specialist_pagecontent" >Specialist3 list</div>
            </div>

CSS

.specialist {background:#f3f3f3;margin-bottom:2px;float:left;clear:left;cursor:pointer;width:250px;text-align:center;height:25px;padding:3px 5px 0px 5px;border: 1px solid #c9c9c9; -moz-border-radius: 3px 3px 3px 3px;-webkit-border-radius: 3px 3px 3px 3px;    -khtml-border-radius:     3px 3px 3px 3px;    border-radius: 3px 3px 3px 3px;}
.specialist:hover{background:#e0e0e0;border: 1px solid #c1c1c1;}
.selected-specialist{background-color:#d6d6d6!important;border: 1px solid #949494 !important;}
.specialist_pagecontent {position:absolute;top:0;left:-100%;}
#specialist_lists {float:left;border: 1px solid #000000;position:relative;width:200px;height:200px;overflow:hidden;}
#specialists {float:left;width:350px;}

JavaScript

$(function() 
{  
    $('.specialist_pagecontent').eq(0).addClass("active").animate({ left : 0 }, 500);
    $('.specialist').click(function() {  
        $('.specialist_pagecontent').filter(".active").removeClass("active").stop(true).animate({ left : '-100%' }, 500); 
        $('.selected-specialist').removeClass('selected-specialist');
        $(this).addClass('selected-specialist');
        $('.specialist_pagecontent').eq($(this).index('.specialist')).addClass("active").stop(true).animate({ left : 0 }, 500);
    });  
});