JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="wrap">
    
    <header>
        <h1 class="entry-title uc-font" itemprop="name">Under Construction</h1>
        <h2>by <a href="http://twitter.com/genelocklin" title="follow @genelocklin on GeoCities&hellip; er Twitter" rel="external" target="_blank" class="url author me" itemprop="url">@genelocklin</a></h2>
    </header>
    
    <div class="example">
        <div id="uc-horse" class="uc-font">
            <div class="lights">
                <div class="light-left"></div>
                <div class="light-right"></div>
            </div>
            <b><span>Under Construction</span></b>
            <div class="legs">
                <div class="leg-left"></div>
                <div class="leg-right"></div>
            </div>
        </div>
    </div><!-- /example -->    
        
    <div class="example">
        <b id="uc-bar">Under Construction</b>
    </div><!-- /example -->    
        
    <div class="example">
        <div id="uc-flame-bg" class="ac">
            <b class="uc-font">Under Construction</b>
        </div>
    </div><!-- /example -->        

    <div class="example">
        <div id="uc-flip-y">
            <b class="uc-font">Under<br /> Construction</b>
        </div>
    </div><!-- /example -->            

    <div class="example ac">
        <b id="uc-flames" class="uc-font">Under Construction</b>                                            
    </div><!-- /example -->    
        
    
</div><!-- /wrap -->

CSS

* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

/* text */
body { 
    font: 100%/1.5 sans-serif;
}

/* awesome font stack */
.uc-font { 
    font-family: 'Comic Sans', 
                 'Comic Sans MS', 
                 'ChalkboardSE-Regular', 
                 'Marker Felt', 
                 'Purisa', 
                 'URW Chancery L', 
                  cursive; }

.ac { text-align: center; }

/* layout */
html {
    background: #f1f2f3...

JavaScript

// StyleFix 1.0.1 & PrefixFree 1.0.4 / by Lea Verou / MIT license
(function(){function h(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var b=window.StyleFix={link:function(a){try{if(!/\bstylesheet\b/i.test(a.rel)||!a.sheet.cssRules)return}catch(c){return}var d=a.href||a.getAttribute("data-href"),f=d.replace(/[^\/]+$/,""),g=a.parentNode,e=new XMLHttpRequest;e.open("GET",d);e.onreadystatechange=function(){if(4===e.readyState){var c=e.responseText;if(c&&a.parentNode){c=b.fix(c,!0,a);f&&(c=c.replace(/url\((?:'|")?(.+?)(?:'|")?\)/gi,
function(a,c){return!/^([a-z]{3,10}:|\/|#)/i.test(c)?'url("'+f+c+'")':a}),c=c.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+f,"gi"),"$1"));var d=document.createElement("style");d.textContent=c;d.media=a.media;d.disabled=a.disabled;d.setAttribute("data-href",a.getAttribute("href"));g.insertBefore(d,a);g.removeChild(a)}}};e.send(null);a.setAttribute("data-inprogress","")},styleElement:function(a){var c=a.disabled;a.textContent=b.fix(a.textContent,!0,a);a.disabled=c},styleAttribute:function(a){var c=
a.getAttribute("style"),c=b.fix(c,!1,a);a.setAttribute("style",c)},process:function(){h('link[rel~="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);h("style").forEach(StyleFix.styleElement);h("[style]").forEach(StyleFix.styleAttribute)},register:function(a,c){(b.fixers=b.fixers||[]).splice(void 0===c?b.fixers.length:c,0,a)},fix:function(a,c){for(var d=0;d<b.fixers.length;d++)a=b.fixers[d](a,c)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(a,b){return b.toUpperCase()}).replace("-",
"")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};(function(){setTimeout(function(){h('link[rel~="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()}})();
(function(h){if(window.StyleFix&&window.getComputedStyle){var b=window.PrefixFree={prefixCSS:function(a,c){function...