JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<div class='cm-overlayflow' id='cm-back'></div>
<div id="notif" title="Notifikasi"></div>
<div id='comments-container'>Loading...</div>
<div id='show-total'/>

CSS

#show-total {
  position:fixed;
  top:8px;
  right:288px;
  z-index:999;
  cursor:pointer;
  float:right;
}
.total-show {
    background-color:#f1c40f;color:white;padding:2px 6px;font-size:11px;border-radius:4px;font-weight:bold;
  }
#notif {cursor:pointer;}
#notif:before {
  content: "x";
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;
  opacity:.5;
  z-index:999;
  transition:all 0.4s ease-out;
}
  #notif:hover:before {
  opacity:1;
}
#cm-notif_close {top:15px;
  right:8px;position:absolute;cursor:pointer;}
#cm-notif_close:before {
  content: "x";
  color:#fff;
  opacity:.5;
  z-index:99997;
  transition:all 0.4s ease-out;
}
  #cm-notif_close:hover:before {
  opacity:1;
}
#comments-container { display:none;color:#666;height:100%;width:350px; font-family:Arial,Sans-serif;position:fixed;z-index:999;top:0;left:0px;border-left:4px solid #369;overflow:auto}.cm-outer { margin:0 auto; padding:0; font-size:11px; text-align:left }
.cm-outer li { padding:7px 10px 12px; list-style:none; clear:both; position:relative; border-top:1px solid #28313b; border-bottom:1px solid #111; margin-right:10px }
.cm-outer code, .cm-outer i[rel=&quot;code&quot;], .cm-outer pre, .cm-outer i[rel=&quot;pre&quot;] {font:normal normal 11px/normal Monaco,&quot;Courier New&quot;,Courier,Monospace;color:pink;}
.cm-outer .cm-youtube {display:block;border:none;background-color:#333;width:370px;height:218px;margin:0 auto 30px;}
.cm-outer .cm-image {display:block;margin:0 auto 15px;outline:none;border:1px solid #ccc;background-color:white;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2);padding:5px;max-width:96%;height:auto;width:auto\9;}
.cm-outer pre,
.cm-outer i[rel=&quot;pre&quot;] {
  display:block;
  background-color:#222;
  color:orange;border-left:4px solid #900;
  padding:5px;
  margin:5px 0px;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
}
.cm-outer...

JavaScript

var originalTitle = document.title;
var cm_config = {
    home_page: "http://defandaky.blogspot.com",
    max_result: 39,
    t_w: 40,
    t_h: 40,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function (total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>' + total + '</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function () {
    $("#comments-container").slideDown('slow');
    $("#cm-back, #cm-notif_close").show();
    $("#notif").hide();
});

$('#cm-back').click(function () {
    $("#comments-container").slideUp('slow');
    $("#cm-back, #cm-notif_close").hide();
    $("#notif").show();
});
document.getElementById('notif').onclick = function () {
    document.title = originalTitle;
    $('#show-total').hide();
};
document.getElementById('show-total').onclick = function () {
    document.title = originalTitle;
    $('#show-total').hide();
    $("#comments-container").slideDown('slow');
    $("#cm-back").show();
};
var cm_config_defaults = {
	home_page: "http://defandaky.blogspot.com",
	max_result: 37,
	t_w: 32,
	t_h: 32,
	summary: 9999,
	new_tab_link: true,
	ct_id: "comments-container",
	new_cm: " Komentar Baru!",
	interval: 30000,
	alert: true
}, _cookie = {
	set: function (g, f, j) {
		var i, h;
		if (j) {
			i = new Date();
			i.setTime(i.getTime() + (j * 24 * 60 * 60 * 1000));
			h = "; expires=" + i.toGMTString();
		} else {
			h = "";
		}
		document.cookie = g + "=" + f + h + "; path=/";
	}, get: function (f) {
		var e = f + "=",
			h = document.cookie.split(";"),
			j;
		for (var g = 0; g < h.length; g++) {
			j = h[g];
			while (j.charAt(0) == " ") {
				j = j.substring(1, j.length);
			}
			if (j.indexOf(e) == 0) {
				return j.substring(e.length, j.length);
			}
		}
		return null;
	}, del: function (b) {
		this.set(b, "", - 1);
	}
}, tt_cm =...