JSFiddle - React, Tailwind, and code Playground

HTML

<div class="muncul slide_in">
<div class="left_gate"></div>
<div class="right_gate"></div>
<p><script type="text/javascript">
//<![CDATA[
//Jumlah komentar yang tampil
var jmlkomentar = 3,
//Jumlah karakter judul
  jmlkarakter = 38,
//ubah dengan URL blog anda
  home_page = "http://mas-jin.blogspot.com",
//Mengubah ukuran thumbnail gambar menjadi 40
  lebargambar = 40,
  blank = "http://1.bp.blogspot.com/-ZnSQgrJRyfw/UNcY8dQagtI/AAAAAAAABCc/jkvJoCgo2dw/s1600/Anonim20.jpg";

function tampilkankomentar(json) {
  document.write('<div id="komentar"><ul>');
  var entry, urlkomentar, isikomentar, lihatkomentar;
  for (var i = 0; i < jmlkomentar; i++) {
    entry = json.feed.entry[i];
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        urlkomentar = entry.link[k].href;
        break
      }
    }
    document.write('<li>');
    var judul = urlkomentar.replace(/-/g, " ").substring(urlkomentar.lastIndexOf('/') + 1, urlkomentar.lastIndexOf('.')),
      urlgambar = entry.author[0].gd$image.src.replace(/\/s(220|512)/, "\/s" + lebargambar);
    if (judul.length > jmlkarakter) {
      judul = judul.substring(0, jmlkarakter) + "..";
    }
    if (entry.author[0].name.$t == "Fajrin Ilham H") {
      document.write('<span class="gambar admin"><img src="' + urlgambar + '"/></span>');
    } else if (entry.author[0].gd$image.src == "http://img1.blogblog.com/img/openid16-rounded.gif") {
      document.write('<span class="gambar"><img src="' + blank + '"/></span>');
    } else {
      document.write('<span class="gambar"><img src="' + urlgambar + '"/></span>');
    }
    document.write('<a rel="nofollow" href="' + urlkomentar + '" target="_blank">' + entry.author[0].name.$t + '</a> -');
    document.write(' <span class="isi">Posting :</span><br/>' + judul);
    document.write('</li>');
  }
  document.write('</ul></div>');
}
document.write('<scr' + 'ipt src="' + home_page +...

CSS

.muncul { position:relative; width:500px; height:195px; margin:20px auto; z-index:1; box-shadow:0 2px 10px rgba(0,0,0,0.3); }
.muncul p { color:black; text-align:center; margin:0; }
.slide_in { overflow:hidden; }
.slide_in .left_gate { background:#0F83A0; opacity:0.6; }
.slide_in .right_gate { background:#0F83A0; opacity:0.6; }
.left_gate { position:absolute; background:#AD3000; bottom:0; right:50%; left:0; top:0; transition:all 0.7s ease-out; }
.muncul:hover .left_gate { right:100%; left:-50%; opacity:0.1; }
.right_gate { position:absolute; bottom:0; left:50%; right:0; top:0; transition:all 0.7s ease-out; }
.muncul:hover .right_gate { left:100%; right:-50%; opacity:0.1; }
#komentar { padding:5px; background:#0F83A0; clear:both; }
#komentar ul { list-style-type:none; margin:0; padding:0; font:normal 13px/20px Segoe UI,sans-serif; background:#ddd; clear:both; }
#komentar ul li { list-style-type:none; padding:10px; background:linear-gradient(#ddd,#eee); border-bottom:1px solid #d4d4d4; margin:0 0 1px 0; transition:all .2s linear 0s; }
#komentar .isi { color:#333; }
#komentar .gambar { overflow:hidden; display:block; border:2px solid #AD3000; width:40px; height:40px; float:left; margin:0 10px 0 0; }
#komentar .gambar.admin { opacity:0.4; transition:all .3s linear 0s; }
#komentar .gambar.admin:hover { opacity:2; transition:all .3s linear 0s; }
#komentar .gambar img { width:100%; height:100%; }
#komentar a { color:blue; text-decoration:none; }
#komentar a:visited { color:#24B035; }