JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="news">
                                                
                            <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p>
</li>
                            
                        
                                                
                            <li><p><a href="http://google.com">google.com link</a></p>

</li>
                            
                        
                        </ul>
                        
                
                <div id="newsNav">
                    <span id="newsRight"><a href="#"><img src="http://engineercreativity.com/samples/einav/images/newsleft.png" alt="&gt;" /></a></span>
                    <span id="newsLeft"><a href="#"><img src="http://engineercreativity.com/samples/einav/images/newsright.png" alt="&lt;" /></a></span>
                </div><!-- /#newsNav -->

CSS

ul#news { list-style-type: none; position:relative; height:101px; color: black; }
ul#news > li { font-size: 11px; margin: 10px; margin-right: 15px; position: absolute; top: 0; right:0; opacity: 0; filter:alpha(opacity=0);  color: black; }
#newsNav { position: absolute; top: 80px; right: 115px; }
span#newsLeft { float: left; margin-right: 10px; }
span#newsRight { float: right; }

JavaScript

$(function() {

$('ul#news li:first').addClass('active').addClass('firstNews');

$('ul#news > li').css({opacity:0.0}).filter('ul#news  li.firstNews').css({opacity:1.0});
$('#newsLeft').click(function() {

    var $active = $('ul#news li.active');
    var $next = $active.next().length ? $active.next() : $('ul#news li.firstNews');
    
        $active.animate({opacity:0.0}, 300, function() {
            //when done animating out, animate next in
            $next.css({opacity:0.0})
                .animate({opacity: 1.0}, 400, function() {
                $active.removeClass('active');
                $next.addClass('active');
        });
    });
    
    return false; 
}); //clickRight

$('#newsRight').click(function() {

    var $active = $('ul#news li.active');
    var $previous = $active.prev().length ? $active.prev() : $('ul#news li.firstNews');
    
        $active.animate({opacity:0.0}, 300, function() {
            //when done animating out, animate next in
            $previous.css({opacity:0.0})
                .animate({opacity: 1.0}, 400, function() {
                $active.removeClass('active');
                $previous.addClass('active');
        });
    });
    
    return false; 
}); //clickRight



});