JSFiddle - React, Tailwind, and code Playground

HTML

<div id="prevnext"><ul class="prevnext_slider"><li class="prevnext_left"><div class="slide_left"></div><div class="prevnext_left_content"><h5><a href="egyedul-a-csucson">Egyedül a csúcson</a></h5><p class="prevnext_date">2010-11-16</p> <p class="prevnext_content">A csúcson egyedül van az ember. A vezet&#337;k tudják, hogy végül is &#337;k viselik a felel&#337;sséget mindenért, és sokak jólléte is az &#337; ...</p><a href="egyedul-a-csucson" class="prevmore">Tovább &raquo;</a></div></li><li class="prevnext_right"><div class="prevnext_right_content"><h5><a href="valassz">Válassz!</a></h5><p class="prevnext_date">2010-11-24</p> <p class="prevnext_content">Néha azt tapasztalom, hogy türelmetlen vagyok azokkal szemben, akik panaszkodnak, másokat hibáztatnak saját sorsuk miatt. Biztos van olyan is ...</p><a href="valassz" class="prevmore">Tovább &raquo;</a></div><div class="slide_right"></div></li><li class="prevnext_left"><div class="slide_left"></div><div class="prevnext_left_content"><h5><a href="post_196">Miért dolgozol?</a></h5><p class="prevnext_date">2010-12-07</p> <p class="prevnext_content">Ahogy olvasgatok, úgy látom, egyre többen foglalkoznak a munka értelmének kutatásával. Végülis a végs&#337; konklúzió számomra az, hogy ha az ...</p><a href="post_196" class="prevmore">Tovább &raquo;</a></div></li><li class="prevnext_right"><div class="prevnext_right_content"><h5><a href="post_199">Öcsém, te semmit se változtál</a></h5><p class="prevnext_date">2011-01-14</p> <p class="prevnext_content">Olvastam egy könyvben, hogy a jellemvonásaink er&#337;södnek, ahogy öregszünk. Beszélgettem err&#337;l olyanokkal, akik nem értenek egyet ezzel. ...</p><a href="post_199" class="prevmore">Tovább &raquo;</a></div><div class="slide_right"></div></li><li class="prevnext_left"><div class="slide_left"></div><div class="prevnext_left_content"><h5><a href="post_126">Megtérül-e a tréning?</a></h5><p class="prevnext_date">2011-01-26</p> <p class="prevnext_content">Nemrég tartottunk...

CSS

div.prevnext_left_content {
    float:right;
    width:260px;
    padding:2px;
    height:130px;
    position:relative;
    right:40px;
    top:10px;
    text-align:right;
    overflow:hidden;
}
div#prevnext {
    margin-left:10px;
}
div.prevnext_right_content {
    float:left;
    width:280px;
    padding:2px;
    height:130px;
    text-align:left;
    position:relative;
    left:34px;
    top:10px;
    overflow:hidden;
}
.prevnext_left_content h5, .prevnext_right_content h5 {
    margin:0px;
    padding:0px;
    font-size:13px;
    font-weight:bold;
    color:#133958;
    font-family:Arial, Helvetica, sans-serif;
    height:15px;
    margin-bottom:2px;
    overflow:hidden;
}
.prevnext_left_content h5 a, .prevnext_right_content h5 a, .prevnext_left_content h5 a:visited, .prevnext_right_content h5 a:visited {
    font-weight:bold;
    color:#133958;
    text-decoration:none;
}
.prevnext_date {
    color:#4a535a;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:0px;
    margin:0px;
}
.prevnext_content {
    color:#1b2125;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:0px;
    margin:0px;
    margin-top:13px;
    height:70px;
    overflow:hidden;
width:250px;
}
.prevnext_content_small {
    color:#1b2125;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:0px;
    margin:0px;
    margin-top:5px;
    height:50px;
    overflow:hidden;
width:250px;
}
.prevnext_right_content .prevnext_content{

}
.prevnext_p {
    text-align:left;
    padding-bottom:5px;
    color:#000000;
}
.prevnext_n {
    text-align:right;
    padding-bottom:5px;
}
a.prevmore, a.prevmore:visited {
    color:#133958;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:0px;
    margin:0px;
    text-decoration:none;
}
li.prevnext_left {
    padding:0px;
    margin:0px;
    width:344px;
    background-image:url(../_mmentor2_imgs/prevnext_bg.png);
    background-repeat:no-repeat;
   ...

JavaScript

(function($){
    $.fn.slider = function(options){
        var defaults = {
            
            },
            self = $( this ).css('padding-left','0px'),
            ulwidth = 694,
            liwidth = 347,
            lilength = self.find('li').length,
            selectedLi = self.find("li.slider_selected");

        self.parent().css({ width: ulwidth, overflow:'hidden' });
        
        if( !!lilength){
            lilength++;
            self.append( $('<li>').html('&nbsp;') );
        }
        

        self.css({ 'width':lilength * liwidth, 'overflow':'hidden'});
        self.find('li').each(function( i, elem ){
            $( elem ).css({ 'list-style-type': 'none', 'float':'left', 'width': liwidth});
        });
        
        $('.slide_left').bind('click',function(){
            if( $(this).parent('li').prev('li').length === 0){
                return false;
            }

            self.animate({ 'margin-left': '+='+ ulwidth},{ easing: "easeOutBack", duration: 600});
            return false;
        });
        
        $('.slide_right').bind('click',function(){
            
            if( $(this).parent('li').next().length === 0){
                return false;
            }
            
            self.animate({ 'margin-left': '-='+ ulwidth},{ easing: "easeOutBack", duration: 600});
            return false;
        });
        
        if( selectedLi.length === 1 ){
            var index = selectedLi.index()+1,
                isOdd = !!index%2;
            
            self.css("margin-left", - ( parseInt( ( isOdd ? index : (index-1) ) / 2)* ulwidth ) );
        
        }
        
        return this;
    
    }


})(jQuery);
$( document ).ready(function(){
$('ul.prevnext_slider').slider();
});