JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<center>
<canvas width="500" height="450" id="myCanvas">
<ul><li><a href="http://beben-koben.blogspot.com/search/label/Agama" style="color: rgb(85, 126, 0);" title="Agama">Agama</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Blogger" style="color: rgb(190, 31, 0);" title="Blogger">Blogger</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Celebritis" style="color: rgb(77, 134, 0);" title="Celebritis">Celebritis</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Coded" style="color: rgb(202, 20, 0);" title="Coded">Coded</a></li><li><a href="http://beben-koben.blogspot.com/search/label/CSS" style="color: rgb(185, 36, 0);" title="CSS">CSS</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Curhat" style="color: rgb(89, 123, 0);" title="Curhat">Curhat</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Facebook" style="color: rgb(98, 115, 0);" title="Facebook">Facebook</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Hack" style="color: rgb(146, 71, 0);" title="Hack">Hack</a></li><li><a href="http://beben-koben.blogspot.com/search/label/HTML" style="color: rgb(176, 43, 0);" title="HTML">HTML</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Informasi" style="color: rgb(224, 0, 0);" title="Informasi">Informasi</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Javascript" style="color: rgb(200, 22, 0);" title="Javascript">Javascript</a></li><li><a href="http://beben-koben.blogspot.com/search/label/jQuery" style="color: rgb(103, 110, 0);" title="jQuery">jQuery</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Kontes" style="color: rgb(72, 139, 0);" title="Kontes">Kontes</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Ragam" style="color: rgb(210, 12, 0);" title="Ragam">Ragam</a></li><li><a href="http://beben-koben.blogspot.com/search/label/Snippet" style="color: rgb(77,...

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
#myCanvas {background: url(http://cdn.easylife.tw/beauty/attach/images/50/636/068/7b0c59c7822403b80c9938af44711b21.jpg) no-repeat left top;width:500px;height:450px;border:3px solid #F6F;-webkit-border-radius: 15px;-moz-border-radius:15px;border-radius:15px;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred
{padding-top:5px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:10px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}

JavaScript

(function(D){var L,K,C=Math.abs,p=Math.sin,g=Math.cos,x={},y={},z={0:"0,",1:"17,",2:"34,",3:"51,",4:"68,",5:"85,",6:"102,",7:"119,",8:"136,",9:"153,",a:"170,",A:"170,",b:"187,",B:"187,",c:"204,",C:"204,",d:"221,",D:"221,",e:"238,",E:"238,",f:"255,",F:"255,"},d,E,c,h=document;for(L=0;L<256;++L){K=L.toString(16);if(L<16){K="0"+K}y[K]=y[K.toUpperCase()]=L.toString()+","}function H(i){return typeof(i)!="undefined"}function l(W){var j,V,R,Q,U=[],S=Math.PI*(3-Math.sqrt(5)),T=2/W;for(j=0;j<W;++j){V=j*T-1+(T/2);R=Math.sqrt(1-V*V);Q=j*S;U.push([g(Q)*R,V,p(Q)*R])}return U}function O(S,Q,X,W,V,U){var Y,Z=[],T=Math.PI*(3-Math.sqrt(5)),R=2/S;for(X=0;X<S;++X){W=X*R-1+(R/2);Y=X*T;V=g(Y);U=p(Y);Z.push(Q?[W,V,U]:[V,W,U])}return Z}function u(i){return O(i)}function B(i){return O(i,1)}function m(T,i){var S=T,R,Q,j=(i*1).toPrecision(3)+")";if(T[0]==="#"){if(!x[T]){if(T.length===4){x[T]="rgba("+z[T[1]]+z[T[2]]+z[T[3]]}else{x[T]="rgba("+y[T.substr(1,2)]+y[T.substr(3,2)]+y[T.substr(5,2)]}}S=x[T]+j}else{if(T.substr(0,4)==="rgb("||T.substr(0,4)==="hsl("){S=(T.replace("(","a(").replace(")",","+j))}else{if(T.substr(0,5)==="rgba("||T.substr(0,5)==="hsla("){R=T.lastIndexOf(",")+1,Q=T.indexOf(")");i*=parseFloat(T.substring(R,Q));S=T.substr(0,R)+i.toPrecision(3)+")"}}}return S}function f(i,j){if(window.G_vmlCanvasManager){return null}var Q=h.createElement("canvas");Q.width=i;Q.height=j;return Q}function t(){var j=f(3,3),R,Q;if(!j){return false}R=j.getContext("2d");R.strokeStyle="#000";R.shadowColor="#fff";R.shadowBlur="3";R.globalAlpha=0;R.strokeRect(2,2,2,2);R.globalAlpha=1;Q=R.getImageData(2,2,1,1);j=null;return(Q.data[0]>0)}function P(X,j){var Q=1024,T=X.weightGradient,S,V,R,W,U;if(X.gCanvas){V=X.gCanvas.getContext("2d")}else{X.gCanvas=S=f(Q,1);if(!S){return null}V=S.getContext("2d");W=V.createLinearGradient(0,0,Q,0);for(R in T){W.addColorStop(1-R,T[R])}V.fillStyle=W;V.fillRect(0,0,Q,1)}U=V.getImageData(~~((Q-1)*j),0,1,1).data;return"rgba("+U[0]+","+U[1]+","+U[2]+","+(U[3]/255)+")"}function...