JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<div class="title" style="background-image:url(/wp-content/themes/charcoal2/images/title2.jpg); height:45px"></div>


<html dir="ltr"><head><style>._1UBO6 {
    box-shadow: 0 0 20px 7px rgb(110, 110, 110);
}

.FGjyf {
    opacity: 0.7;
}

._3h7Pe {
    box-shadow: 0 0 20px 7px #ff837a;
    opacity: 0.7;
}

._1ybyk {
    opacity: 0 !important;
}
._24rym {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
}

._24rym > svg {
    width: 35px;
    height: 35px;
}

._24rym > svg > path {
    fill: white;
}

._2C41T {
    transform-origin: 50% 0%;
    animation: _2ptYE 2s linear infinite;
}

@keyframes _2ptYE {
    0% { transform: rotate(0); }
    7% { transform: rotate(7deg); }
    15% { transform: rotate(-7deg); }
    22% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    38% { transform: rotate(3deg); }
    44% { transform: rotate(-2deg); }
    48% { transform: rotate(1deg); }
    50% { transform: rotate(0); }
}
._18Xot {
    width: 32px;
    height: 32px;
    animation: _3zOoT 4.8s linear infinite;
}

@keyframes _3zOoT {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

._18Xot span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    clip: rect(0, 32px, 32px, 16px);
    margin: auto;
    animation: _CF-b 1.2s linear infinite;
}

@keyframes _CF-b {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(220deg); }
}

._18Xot span::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    clip: rect(0, 32px, 32px, 16px);
    margin: auto;
    border: 3px solid #fff;
    border-radius: 50%;
    animation: _1-QUS 1.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes _1-QUS {
    0% { transform: rotate(-140deg); }
    50% { transform: rotate(-160deg); }
    100% {...

CSS

/*

Theme Name: charcoal2



Description: 3 coloumn dark and brown theme.



Author: Jinsona designs



Author URI: http://web2feel.com/

*/



body {

	margin:0;

	padding-top:0px;

	background:#2F2723 ;

	font-family:Verdana,Tahoma,sans-serif;

	color:#99806B;

	font-size:13px;

	}





img {

	border:0;

	}





a {

	color:#EFC8B3;

	text-decoration:none

	}



a:hover {

	color:#CF9C81;

	text-decoration:none

		}



h1, h2, h3, h4, h5, h6 {



	}





blockquote.cita1 {

   width: 480px;

   margin: 10px 0 10px 40px;

   padding: 10px;

   text-align: justify; 

   font: 14px/20px italic Times, serif;

   color: #FFFFFF;

   background: transparent;

   border-left: 4px solid #FF9933;

} 



blockquote.cita2 {

   width:400px;

   padding: 5px 18px 10px 10px;

   text-align: justify;

   font: normal;

   color: #FFFFFF;

   background: #2F2723 url(https://lh5.googleusercontent.com/_N0G_G-cxQDM/TWTLmUj3TiI/AAAAAAAAC78/dNkQw_UgMgk/s31/quotescierre22133b02.png) no-repeat 5% 15%;

} 



blockquote.cita2 span {

   display: block;

   padding: 15px 10px 20px 40px;

   background: url(https://lh5.googleusercontent.com/_N0G_G-cxQDM/TWTL3GPUwaI/AAAAAAAAC8A/eNxjd3XW5Iw/s31/quotescierre213203a.png) no-repeat bottom right;

} 



.c2x {

position:absolute;

top: 610px;

left:700px;

width:300px;

height:250px;

}



.c1x {

position:absolute;

left: 118px;

top: 40px;

width: 56px;

height: 14px;

}



.clear {

	clear:both;

	}



.alignleft {

	float:left;

	padding:2px 0 0 5px;

	}



.alignright {

	float:right;

	padding:2px 0 0 5px;

	}



/* The Wrapper */



#wrapper {

	width:1200px;

	margin:0 auto;

	background:url(http://gnula.nu/wp-content/uploads/2014/04/heada.jpg);

	background-repeat:repeat-y;

	}



/* The Search */



.search {

	height:29px;

	padding:0px 25px 0 14px;

	float: right;

	}



.search form {

	background:url(images/searchbg2.png);

	width:210px;

	height:29px;

	padding-top:15px;

	padding-left:17px;

	}



.search input...

JavaScript

//dezinerfolio
eval((function(){a="Scroller={speed:10,8dC.;d.while(dC.+C.}} J8N;d=5;&&M4M}d&&dM4dM}%4%} 0J8a,F4(F,fa@7a.4a.LP+F7Jend8e66.cancelBubble=true;6.Value=fa@;}&&(E(7J8di=Hner3||5.G3;hN.3;a=(Ed>ah-d>i7e@{-(h-d)7}e@{a=a+(d-a}To(0,aEa==a}=aJHit8KwHdow,A,A7,A82P;l=9;d=locatiP;D&&D.HdexOfL#)!=-1&&(l/+l=C)Kl,Gck,endEl.PGck=2l=this.hash.substr(1E9.name==l;i=setILL+(9)+),107}}}}}};Hit()",b=48;while(b>=0)a=a.replace(new RegExp("%23456789@ACDEFGHJKLMNP".charAt(b),"g"),("\042Scroller.entfunction(offsetParscrollwindow.returndocumattachEvntervala=.getElemsByTagName(a);if(offsetTop){for(i=0;i<a.length;i++.pathnamea+=Math.ceil((d-ae.stopPropagationTopa.addEvListenerbody)/speede.prevDefaultclearI(i)pageYOffsetend(this);Height .Elemev)}:a[i]lseload=dl.href);b,dcliin},((.=.=C||on".split(""))[b--]);return a})())