JSFiddle - React, Tailwind, and code Playground

by Rhinokage Rio

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id='xblanterbox'>
<div class='notif-info info' onclick='document.getElementById(&#39;myModal&#39;).style.top=&#39;80px&#39;;document.getElementById(&#39;overlay&#39;).style.display=&#39;block&#39;;'><i class='fa fa-info icon-box' style='padding: 10px 15px;'></i>Baca Notice Blog<p>Baca Notice Terbaru disini.</p></div>
<div class='notif-info' onclick='document.getElementById(&#39;mydonasi&#39;).style.top=&#39;80px&#39;;document.getElementById(&#39;overlay&#39;).style.display=&#39;block&#39;;'><i class='fa fa-credit-card icon-box' style='padding: 10px;background-color:#00BCD4;'></i>Donasi Untuk Blog ini<p>Berikan Donasi seikhlasnya.</p></div>
<div class='notif-info'><a href='#' onclick='window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&langpair=id%7cen&hl=en&#39;); return false;' rel='nofollow' target='_blank'><span class='fa fa-try icon-box' style='padding: 10px 13px;background-color:#FB8C00;'></span>Translate to English</a><p>Translate This Page.</p></div>
<input class='closebox' onclick='document.getElementById(&#39;xblanterbox&#39;).style.top=&#39;-381px&#39;;' title='Close this' type='button' value='Ă—'/>
</div>
<div id='overlay'></div>
<div class='modal-dialog' id='myModal'>
<div class='modal-content'>
<div class='modal-header'>
<h4 class='modal-title' id='myModalLabel'>
Selamat Datang di Blog Dunia Blanter</h4>
</div>
<div class='modal-body'>
Gunakan Search form yang terletak pada kanan atas blog ini, Jika ingin berkomentar harap berkomentarlah dengan <b>RELEVAN!</b>.<br/>
  Dan buat sobat yang mencari template blogger keren sobat bisa cari <a href='http://template.idblanter.com' target='_blank' title='Koleksi Template Keren.'>disini</a>.<br/>
Dilarang <b>Copy Paste</b> Artikel disini secara keseluruhan, Jika ingin mengutip harap Cantumkan sumber LINK ke blog ini.
</div>
<div...

CSS

body {background:#eee;}
.xblanter-box{top:15px;right:385px;background:rgba(0, 0, 0, 0.5);border-radius:100px;padding:0px 12px;color:rgba(255, 255, 255, 0.84);position: fixed; z-index: 9;font: normal 18px FontAwesome;line-height: 30px;cursor: pointer;}
.xblanter-box:hover{  opacity: 0.8;}
.icon-box{background-color: rgba(66, 133, 244, 0.8);padding: 8px 13px;border-radius: 100%;color: rgba(255, 255, 255, 0.5);margin-right: 5px;}
.icon-box:hover{color:white;background-color:rgba(66, 133, 244, 1);}
.notif-info{background-color: rgba(245, 245, 245,0.5);border:1px solid #eee;padding: 5px 8px;margin-bottom: 10px;cursor: pointer;text-align:left;}
  .notif-info:hover{opacity:0.8}.notif-info p {font-size:11px;color:#555;margin:0;margin-top:-5px;padding-left:40px;}
#xblanterbox{background:#fff;border:1px solid rgba(204, 204, 204, 0.5);color:#333;font-size:14px;font-family: 'Open Sans', Helvetica, Arial, sans-serif;line-height:1.2em;top:-381px;right:306px;padding:20px 15px 15px 15px;position:fixed;width:300px;box-shadow: 0 2px 10px rgba(0,0,0,.2);z-index:10;transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;}
#xblanterbox:before{content:"";width:0;height:0;position:absolute;top:-22px;right:81px;border:11px solid transparent;border-color:transparent transparent  rgba(204, 204, 204, 0.5);}
#xblanterbox:after{content:"";width:0;height:0;position:absolute;top:-19px;right:82px;border:10px solid transparent;border-color: transparent transparent #fff;}
.closebox{background:none;border:none;position:absolute;top:0px;right:0px;cursor:pointer;font-size:18px;font-weight:700;color:#888;}
.closebox:focus{outline:none}
.closebox:hover{color:red;opacity:0.5}
.closebox:active{color:red;opacity:1}
.count-box {width: 18px;height: 18px;line-height: 18px;text-align: center;background-color: rgba(231, 33, 0, 0.89);border-radius: 5px;color: #fff;display: inline-block;font-size: 12px;position: absolute;padding: 0 2px;  top: -5px;left:...