JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<div id="recent_comments">
    <ol>
        <li>
            <img class="avatar" src="//lh4.googleusercontent.com/-GlXWUNgYTUk/AAAAAAAAAAI/AAAAAAAAAMw/FqattdK7Xs8/s50-c/photo.jpg" title="Eky Januarta" alt="Eky Januarta"><strong class="title_content"><a target="_blank" rel="nofollow" title="Eky Januarta" href="http://www.blogger.com/profile/06040993408913066322">Eky Januarta</a> pada <a class="url_komen" href="http://obesitystrike.blogspot.com/2014/12/ngd-flat-v2-responsive.html?showComment=1418375539845#c1632456344572486054">ngd flat v2 responsive...</a></strong><span class="comment_content">Izin comot gan ^_^</span><span class="date text-right"><span class="day">12</span>  <span class="month">Desember</span>  <span class="year">2014</span> - <span class="waktu">4:12 PM</span></span>
        </li>
        <li>
            <img class="avatar" src="//lh5.googleusercontent.com/-7hkehnKdAVA/AAAAAAAAAAI/AAAAAAAAAdE/zFg--aUJPzg/s50-c/photo.jpg" title="Indra Bibs" alt="Indra Bibs"><strong class="title_content"><a target="_blank" rel="nofollow" title="Indra Bibs" href="http://www.blogger.com/profile/13849081929745128396">Indra Bibs</a> pada <a class="url_komen" href="http://obesitystrike.blogspot.com/2014/12/ngd-flat-v2-responsive.html?showComment=1418375413730#c4598341179074352620">ngd flat v2 responsive...</a></strong><span class="comment_content">mantap kayaknya ringan + wus nih xD</span><span class="date text-right"><span class="day">12</span>  <span class="month">Desember</span>  <span class="year">2014</span> - <span class="waktu">4:10 PM</span></span>
        </li>
        <li>
            <img class="avatar" src="//lh4.googleusercontent.com/-XVUnOPC9HGk/AAAAAAAAAAI/AAAAAAAACAo/1xgfTSmIimc/s50-c/photo.jpg" title="Akbar Dawa" alt="Akbar Dawa"><strong class="title_content"><a target="_blank" rel="nofollow" title="Akbar Dawa" href="http://www.blogger.com/profile/01895821551485975487">Akbar Dawa</a> pada <a class="url_komen"...

JavaScript

$(function () {
    var container = $('#recent_comments > ol '),
        list = container.find('li'),
        innerHeight = list.first().height(),
        outerHeight = list.first().outerHeight(true);
    // Container & list height setup
    container.css({
        "height": outerHeight * list.length / 2,
            "overflow": "hidden"
    });
    list.css({
        "height": innerHeight,
            "overflow": "hidden"
    });

    function newsTicker() {
        window.setTimeout(function () {
            container.find('li:last').stop().animate({
                opacity: 0
            }, 1000, function () {
                $(this).hide().prependTo(container).slideDown(1000, function () {
                    $(this).stop().animate({
                        opacity: 1
                    }, 1000, newsTicker);
                });
            });
        }, 3000);
    }
    newsTicker();
});