JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<header>
  <h1>DATA URI Playground</h1>
</header>
<div id="wrapper">
  <div id="source">
    <div>
      <textarea readonly></textarea>
      <p></p>
    </div>
  </div>
  <div id="datauri">
    <div><textarea></textarea></div>
  </div>
</div>

CSS

/**
 *  @charset    utf-8
 *  @modified    October 23, 2010
 *  @description  DATA URI Playground用
 *  @author      Tohl SMALLFIELD @ blades
 */
/*------------------------------------------------------------------------------

              テキスト画像代替
              
------------------------------------------------------------------------------*/
h1
{
  display: block;
  margin: 0;
  padding: 0;
  border-style: none;
  text-indent: -10000px;
  text-decoration: none;
  text-align: left;
}



/*------------------------------------------------------------------------------

              
              
------------------------------------------------------------------------------*/
html,
body,
h1,
div,
p,
textarea,
img,
span{
  margin: 0;
  padding: 0;
  font-size: 100%;
}

body{
  background: #002b66 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAABGCAMAAADRobVsAAABDlBMVEUAK2YAKmcAK2cAK2kAKWUALGkAKmgAKWYAMXEALGgAOo0AIlQALmwANJUAI1QAHUcAMXIAHkYAOJIAKWcAKWQAJFgAIlUAGjwAH0wAGDkAM5QAN5IAGTsAOoUAI1cAKGMAOIEAL24AO4wAKGIALpMAOYgAHUYAKI4AHEMAJ18AGDgAHkkAJFoAH00ANXoAOY4AHEQANn0AIFAAGToAM3UALJEAI1kANpQAIk4AOH8AGz8AIEsAH0gAJl0AOZEAH0oAJmAAJV0ANHcAKWMAOYQAMJUAH08AMZQAJV4AJ40AKpAAHEIAHUIAOYkAGj0AJloAGz0AIVMAJ2IAJFsAI1gAJ2EAK2gAG0AAIVIAJl/CWkQ6AAAAo0lEQVRo3m3Ix0LCQAAA0dnNJhTpoihKb4pUwYoFEEGqoKb9/49I7szhHYb6nPMtvRqXNqkFmxXPd9hxlmWuXuh8Uh0QnXHzyHuaM4dmmGmE2wecE3YXHH1zmiD7yt8b99c02vyajIJ8feAWcRXDNaaPnwolQS5D0kBNUBoq7+l7QuztcqwhWggdY4zUkX3vixiGhvQjA8gC0kKEEBJ0EGBxqH+qPRGw5e5nHAAAAABJRU5ErkJggg==) repeat-x scroll left top;
}

h1{
  position: absolute;
  top: 2px;
  left: 7px;
  width: 351px;
  height: 53px;
  background-image:...

JavaScript

/**
 *  @charset    utf-8
 *  @modified    October 27, 2010
 *  @description  DATA URI Playground用
 *  @author      Tohl SMALLFIELD @ blades
 */
window.FileReader ? (function(){
  var win = this,
    doc = win.document,
    bdy = doc.body;
  
  var initialized = false;
  
  //検証中／未使用
  var atobAsync = function(b64, onSuccess, onError){
    var ifr = doc.createElement("iframe");
    ifr.onload = function(){
      try{
        //chrome contentWindow取得できず
        var idoc = ifr.contentWindow.document;
        //onSuccess( idoc.body.getElementsByTagName("pre")[0].innerHTML );
        onSuccess( idoc.body.textContent );
      }catch(err){
        try{
          onSuccess( atob(b64) );
        }catch(err){
          onError(err);
        }
      }finally{
        ifr.onload = null;
        bdy.removeChild(ifr);
        ifr = null;
      }
    };
    try{
      ifr.src = "data:text/plain;charset=utf-8;base64," + b64;
    }catch(err){
      onError(err);
    }
    bdy.appendChild(ifr);
  };
  
  var source = (function(){
    var txt = doc.querySelector("#source textarea"),
      p   = doc.querySelector("#source p");
    return {
      clear : function(){
        txt.blur();
        p.style.display = "block";
        p.innerHTML = txt.value = "";
      },
      add : function(data, data2){
        initialized || (initialized = true) && (bdy.className = "initialized");
        if(!data){
          datauri.cls("-invalid");
          return;
        }
        //
        //  data:[<MIME-type>][;charset=<encoding>][;base64],<data>
        //
        var mtc = /^data:([^\/]+)\/[^,]+,/.exec(data);
        if(mtc){
          var typ = mtc[1],
            b64 = data.replace(mtc[0], "");
            
          switch(typ){
            case "image" :
              var spn = doc.createElement("span"),
                img = new Image(),
                tmr;
              p.style.display = "block";
              img.onload = function(){
                var sty = img.style,
            ...