JSFiddle - React, Tailwind, and code Playground

by Opick Kusanagi

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700"></script>
<div id="wrapper">   
    
    <div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'></i></span>
<div id='adbreakingnews'>Loading...</div></div>    
    
            <div class="screen">
                <div class="list">
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                    
                    </div>
                    
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                    
                    </div>
                    
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                    
                    </div>
                    
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                    
                    </div>
                </div>   
 </div>

CSS

/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: #e6e6e6;
    width: 100%;
    height: 100%;
    font: 12px "Open Sans", sans-serif;
}

#wrapper {
    width: 50%;
    height: 560px;
    overflow: hidden;
    margin: 20px auto;
    background: #fff;
    border: 1px solid #c6c6c6;
}

div.screen {
    height: 560px;
    overflow: hidden;
    background: transparent;
    margin: 15px;
}

.list {
    margin-top: 36px;
    text-align: left;
}

.item {
    height: 115px;
    margin-left: 115px;
    clear: both;
}

.item .img, .item span {
    background: #f0f0f0;
}

.item .img {
    float: left;
    width: 96px;
    height: 81px;
    margin-left: -113px;
}

.item span {
    height: 11px;
    width: 320px;
    margin-bottom: 19px;
    float: left;
}

.item span:nth-of-type(3) {
    width: 95px;
    margin-bottom: 0;
}

a:link {
    color: #e76e66;
    text-decoration: none;
    outline: none;
    transition: all 0.25s;
}

a:visited {
    color: #666;
    text-decoration: none;
}

a:link:hover {
    color: #666;
    text-decoration: none;
}

a:visited:hover {
    color: #e76e66;
    text-decoration: none;
}

/* CSS Breaking News */
#breakingnews {
    margin: 15px;
    height: 38px;
    line-height: 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6e6e6;
}

#breakingnews .breakhead {
    position: absolute;
    background: none repeat scroll 0 0 #444;
    color: #fff;
    display: block;
   ...

JavaScript

$(document).ready(function(){var e="http://wajahilmu.blogspot.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});