JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<header><div>
  <h1>QuickBenchmark</h1>
  <p><a href="http://www.w3.org/html/logo/" target="_blank">HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics</a></p>
</div></header>
<section id="secCodes"><div>
  <code class="a">
    <span class="reserved">var</span>&nbsp;<var class="funcName">A</var>&nbsp;=&nbsp;<span class="reserved">function</span>(){<br />
      <span class="indent">
        <textarea id="initA" name="initA" class="init"></textarea>
        <span class="reserved">var</span>&nbsp;<var>t</var> = +<span class="reserved">new</span>&nbsp;<span class="global">Date</span>;<br />
        <span class="reserved">for</span>(<span class="reserved">var</span>&nbsp;<var>i</var>=<span class="number">0</span>; <var>i</var>&lt;<input type="Number" id="iMax" name="iMax" class="num" value="100" />; ++<var>i</var>){<br />
        <span class="indent">
          <textarea id="loopA" name="loopA" class="loop">document.body.appendChild( document.createTextNode("A") );</textarea>
        </span>
        }<br />
        <var>t</var>&nbsp;= +<span class="reserved">new</span>&nbsp;<span class="global">Date</span>&nbsp;-&nbsp;<var>t</var>;<br />
        <textarea id="endA" name="endA" class="end"></textarea>
        <span class="reserved">return</span>&nbsp;<var>t</var>;<br />
      </span>
    };<br />
  </code>
  <code class="b">
    <span class="reserved">var</span>&nbsp;<var class="funcName">B</var>&nbsp;=&nbsp;<span class="reserved">function</span>(){<br />
      <span class="indent">
        <textarea id="initB" name="initB" class="init"></textarea>
        <span class="reserved">var</span>&nbsp;<var>t</var> = +<span class="reserved">new</span>&nbsp;<span class="global">Date</span>;<br />
        <span class="reserved">for</span>(<span class="reserved">var</span>&nbsp;<var>i</var>=<span class="number">0</span>; <var>i</var>&lt;<input type="Number" id="iMax2" name="iMax2" class="num" value="100" />; ++<var>i</var>){<br />
        <span...

CSS

/**
 *  @charset       utf-8
 *  @modified      February 10, 2011
 *  @description   QuickBenchmark
 *  @author        Tohl SMALLFIELD
 */
/*------------------------------------------------------------------------------

                reset
                
------------------------------------------------------------------------------*/
body,
h1,h2,
header,section,article,footer,hgroup,
div,p,span,em,a,code,var,
input,button,textarea{
  margin: 0;
  padding: 0;
  background: no-repeat scroll left top;
  border-style: none;
  font-style: normal;
  outline: none;
  font-size: 100%;
}

header,section,article,footer,hgroup{
  display: block;
}



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

                clearFix
                
------------------------------------------------------------------------------*/
header > div:after,
section#secResults h2:after
{
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
  content: ".";
}



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

              テキスト画像代替
              
------------------------------------------------------------------------------*/
h1,
header a,
button,
section#secSandbox h2,
nav#navControls label,
p#controlConfig,
td strong,
footer a
{
  display: block;
  margin: 0;
  padding: 0;
  border-style: none;
  text-indent: -10000px;
  text-decoration: none;
  text-align: left;
}



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

                非表示部
                
------------------------------------------------------------------------------*/
input#toggleIframes
{
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: -9999;
  width: 0;
  height: 0;
  overflow: hidden;
}



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

                
               ...

JavaScript

//<![CDATA[
/**
 *  @charset       utf-8
 *  @modified      February 10, 2011
 *  @description   QuickBenchmark
 *  @author        Tohl SMALLFIELD
 */
(function(Data, Graph, Table, Sandbox){/////////////////////////////////////////////////////////////
  
  var doc      = this.document,
      bdy      = doc.body,
      
      $        = function(xpr){ return doc.querySelector(xpr); },
      $$       = function(xpr){ return doc.querySelectorAll(xpr); },
      
      //エラー時ハイライト用
      codeA    = $("code.a"),
      codeB    = $("code.b"),
      
      //入力フィールド
      interval = $("#interval"),
      loopA    = $("#loopA"),
      loopB    = $("#loopB"),
      initA    = $("#initA"),
      initB    = $("#initB"),
      endA     = $("#endA"),
      endB     = $("#endB"),
      loopNum  = $("#iMax"),
      loopNum2 = $("#iMax2"),
      testNum  = $("#testNum"),
      
      //実行ボタン
      btn      = $("#btnRun button"),
      
      //テストコード作成用
      sbA      = new Sandbox("#secSandbox section.a article", "A").reset(),
      sbB      = new Sandbox("#secSandbox section.b article", "B").reset();
  
  /**
   *  Textarea 自動リサイズ 設定
   *  
   *  @see http://jsdo.it/tsmallfield/auto_resize_textarea
   */
  Array.prototype.forEach.call($$("#secCodes textarea"), function(elm){
    var sty = elm.style,
        cch;
    elm.onkeydown = elm.onkeypress = elm.onkeyup = elm.onfocus = function me(){
      var val = elm.value,
          rgx = /\r?\n/g,
          lns = 0;
          
      if(val !== cch){
        cch = val;
        
        //まずは改行の数でチェック(ES5:正規表現リテラルで直接書くと無限ループ)
        while( rgx.exec(val) ) ++lns;
        elm.rows = lns || 1;//0だとエラー@IE
        
        //折り返している場合を考慮しscrollHeightで調整
        sty.height = "auto";
        sty.height = elm.scrollHeight + "px";
        
        //レンダリングが追いつかない?とき用(主にIE)
        setTimeout(function(){
          sty.height = elm.scrollHeight + "px";
        }, 0);
      }
      return me;
    }();
  });
  
  /**
   *  iframe 表示／非表示
   */
 ...