JSFiddle - React, Tailwind, and code Playground

by Mustafa Kaba

HTML

<div id="wrapper">
<style type="text/css">
#wrapper{width:300px!important;}
.mef_recent_comments li{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;border:2px solid transparent;background:none!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px!important;padding:5px!important;}
.mef_recent_comments li:hover{-webkit-transform:scale(1.2) translate(15px);box-shadow:0 0 20px 1px #aaa;}
ul.mef_recent_comments{list-style:none;margin:0;padding:0;}
.mef_recent_comments li .avatarImage{background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;position:relative;overflow:hidden;margin:0 6px 0 0;padding:3px;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.mef_recent_comments li img{position:relative;overflow:hidden;display:block;padding:0;}
.mef_recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4;font-family:georgia,arial;}
</style>
<script type="text/javascript">
//<![CDATA[
// Son Yorumlar Ayarları
var
numComments    = 5,
showAvatar     = true,
avatarSize     = 45,
roundAvatar    = true,
characters     = 40,
showMorelink   = false,
moreLinktext   = "More ?",
defaultAvatar  = "http://img1.blogblog.com/img/anon36.png",
hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/files/blogger-recent-comments.js"></script>
<script type="text/javascript" src="http://etralibela-61.blogspot.com/feeds/comments/default?alt=json&amp;callback=mef_recent_comments&amp;max-results=5">
</script>
</div>