JSFiddle - React, Tailwind, and code Playground

by asfar mohamed

HTML

<script>
    var homePage='minima9.blogspot.com';;
</script>



<div class="container">
<h1>top comment</h1>
<div id="most-comments"></div>
<script>
//<![CDATA[
var numPosts=10;
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>
</div>
<h3 style='margin:0 auto 5% auto;text-align:center;padding:10px;font-size:13px;width:300px;'>By Arlina Design</h3>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
    background-color: #e6e6e6;
    color: #444;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    position: relative;
}
h1{margin:0 auto 20px auto;text-align:center;background:#fc4f3f;color:#fff;padding:10px;font-size:13px;}

.container {
    max-width: 300px;
    background: #fff;
    margin: 5% auto;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 10px 5px -5px rgba(0,0,0,0.1);
}

#most-comments ul,#most-comments li,#most-comments ul li {
    margin: 0;
    list-style: none;
    color: #444;
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    font-size: 14px;
}

#most-comments ul li {
    position: relative;
    overflow: hidden;
    background: #fff;
    margin: 3.5px 0;
    padding: 7px 10px 7px 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: inset 0 0 #fc4f3f;
    border: 1px solid #e6e6e6;
    transition: all .6s;
}

#most-comments ul li:hover {
    box-shadow: inset 310px 0 #fc4f3f;
}

#most-comments ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    transition: all .3s;
}

#most-comments ul li a:hover {
    color: #fff;
}

#most-comments ul li:hover a {
    color: #fff;
}

.count-most {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    margin: 0;
    padding: 7px 0;
    background-color: #383838;
    color: #fff!important;
    text-align: center;
    transition: all .3s;
}

#most-comments ul li:hover .count-most {
    background-color: #fc4f3f;
}