JSFiddle - React, Tailwind, and code Playground

SCSS

#tcom {
  list-style-type:none;
  margin:0;
  padding:0;
  font:normal 13px/20px Arial,sans-serif;
  text-align:center;
  text-transform:capitalize;
}

#tcom li {
  background:#C6C3FF;
  border-bottom:1px solid #E4E5E7;
  margin:0 5px 0 0;
  overflow:hidden;
  padding:5px;
  display:inline-block;
  text-align:left;
}

#tcom li a,
a:visited {
  color:#14BCF1;
}

#tcom li:last-child {
  margin:0;
}

#tcom .img {
  float:left;
  margin:0;
  width:200px;
  height:200px;
  overflow:hidden;
  position:relative;
}

#tcom .img #data {
  position:absolute;
  background:rgba(0,0,0,0.5);
  background:-moz-linear-gradient(left,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,1)),color-stop(100%,rgba(0,0,0,0)));
  background:-webkit-linear-gradient(left,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  background:-o-linear-gradient(left,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  background:-ms-linear-gradient(left,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  background:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000',endColorstr='#00000000',GradientType=1 );
  top:0;
  right:0;
  bottom:0;
  color:#F7F7F7;
  padding:5px 10px;
  visibility:hidden;
  left:-100px;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  opacity:0;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

#tcom .img #data .t {
  background:#FF1313;
  color:#F5F5F5;
  padding:0 2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  border:1px solid #C0C0C0;
}

#tcom .img img {
  vertical-align:middle;
  height:100%;
  width:100%;
}

#tcom li:hover #data {
  visibility:visible;
  left:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
  opacity:1;
}

JavaScript

function topkomentar(feed) {
  document.write('<ul id="tcom">');
  var i;
  for (i = 0; i < feed.count; i++) {
    var d = feed.value.items[i];
    var item;
    var href = d.link,
      itez = d.author['gd:image'].src.replace(/\/s(512|220)/g, "/s200"),
      total = d.title.replace(/([^0-9])/g, ""),
      nama = d.author.name;
    if (feed.value.items[i].link == "") {
      item = "<li>" + feed.value.items[i].title + "</li>"
    } else {
      item = "<li>" + "<div class='img'><img src='http:" + itez + "'/><div id='data'><div class='nama'>" + nama + "</div>" + "Website: <a href=" + href + " 

target='_blank'>Kunjungi</a>" + "<div class='total'>Total Komen : <span class='t'>" + total + "</span></div></div></div>" + "</li>";
      document.write(item)
    }
  }
  document.write('</ul>');
}
  document.write('http://zhinto.blogspot.com/feeds/comments/default?redirect=false&max-results=10&alt=json-in-script&callback=TopKomen');