JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>

<h1>blog infomation</h1>
    <ul id="news" class="ticker">
        <li>
            2012.11.11 「ディワリ」<br /> <a href="http://archanam.blog.fc2.com/"><img src="http://www.yoga-kailas.com/images/blog_banner_ramram.gif"></a><br>
        </li>
                <li>
            2012.11.12　「キール（乳粥）」<br /> <a href="http://radha.blog.fc2.com/"><img src="http://www.yoga-kailas.com/images/blog_banner_gk.gif"></a><br>
        </li>
                <li>
            2012.11.12  「忘れがちなこと」<br /> <a href="http://radha.blog.fc2.com/"><img src="http://www.yoga-kailas.com/images/blog_banner_staff02.gif"></a>
        </li>
                <li>
            2012.11.10  「答え」<br /> <a href="http://blog.goo.ne.jp/yoga-kailas"><img src="http://www.yoga-kailas.com/images/blog_banner_sensei.gif"></a>
        </li>
    </ul>

CSS

html, body {
    font-family: "MS PGothic", "Osaka", Arial, sans-serif;
    font-size: 20px;
    padding: 0;
    margin: 0;
        color: #008080;
}

a { color: #778899; text-decoration: none; }
a:hover { color: #e82134; }

h1{
  background: #ffc0cb;
   margin: 0 ;
    padding: 5px 0px 5px 50px;
    opacity: 0.7 ;
    font-family: 'Verdana, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 20px;
    color: #696969;
}

.ticker {
    width: 600px;
    height: 229px;
    overflow: hidden;
    margin: 65px 0 0 50px;
    padding: 0;
    list-style: none;
    text-shadow: 1px 1px 2px #111;
        font-size: 25px;
}


.ticker li {
    height: 65px;
 border-bottom: 1px dashed #c1c1c1 ;
    padding: 5px;
    margin: 0px 5px;
}

JavaScript

function ticker() {


    $('#news li:first').slideUp(function() {
        $(this).appendTo($('#news')).slideDown();
    });
}
setInterval(function() {
    ticker()
}, 5000);