JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="wrapper">
  <header>
    <h1>Fireworks Generator</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#secResource" role="button" id="modeResource">Resource</a></li>
      <li><a href="#secData"     role="button" id="modeData">Data</a></li>
      <li><a href="#secSample"   role="button" id="modeSample">Sample</a></li>
    </ul>
  </nav>
  <div id="contents">
    <section id="secResource"><div>
      <canvas></canvas>
    </div></section>
    <section id="secData"><div>
      <textarea readonly="readonly"></textarea>
    </div></section>
    <section id="secSample"><div>
      <canvas></canvas>
    </div></section>
  </div>
  <footer>
    <form action="javascript:;">
      <div id="paramThreshold" class="param">
        <label for="threshold">Threshold</label>
        <div class="slider"><a href="javascript:;" role="button"></a></div>
        <input type="number" id="threshold" name="threshold" value="128" />
      </div>
      <div id="paramDataSize" class="param">
        <label for="dataSize">Data Size</label>
        <div class="slider"><a href="javascript:;" role="button"></a></div>
        <input type="number" id="dataSize" name="dataSize" value="10" />
      </div>
      <button>create</button>
    </form>
  </footer>
</div>

CSS

/**
 *  @fileoverview Fireworks generator
 *  @author       Tohl SMALLFIELD
 */
/*------------------------------------------------

------------------------------------------------*/
body,
section,nav,footer,
div,h1,ul,li,a,canvas,textarea{
  margin: 0; padding: 0;
  outline: none;
}
body{
  overflow: hidden;
  background-color: #000;
}
#wrapper{
  position: relative;
  width: 465px; height: 465px;
  background: no-repeat scroll left top;
}
/*------------------------------------------------

------------------------------------------------*/
h1{
  height: 30px;
  background: no-repeat scroll 7px 7px;
  text-indent: -9999px;
}
/*------------------------------------------------

------------------------------------------------*/
ul{
  width: 465px; height: 30px;
  overflow: hidden;
  background: no-repeat scroll left top;
  list-style-type: none;
}
li{
  float: left;
  width: 155px; height: 30px;
}
a{
  display: block;
  width: 155px; height: 30px;
  text-indent: -9999px;
}
/*------------------------------------------------

------------------------------------------------*/
#contents{
  background-color: #dcdcdc;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), color-stop(.5, #fff), to(#dcdcdc));
  background-image: -moz-linear-gradient(#dcdcdc, #fff, #dcdcdc);
  background-image: linear-gradient(#dcdcdc, #fff, #dcdcdc);
  width: 465px; height: 355px;
}
section{
  position: absolute;
  top: 60px; left: 0;
  display: block;
  width: 445px; height: 335px;
  padding: 10px;
  z-index: 1;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition:    opacity .5s ease-in-out;
  -ms-transition:     opacity .5s ease-in-out;
  -o-transition:      opacity .5s ease-in-out;
  transition:         opacity .5s ease-in-out;
  opacity: 0;
}
section div{
  width: 433px; height: 323px;
  padding: 5px;
  background-color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  -ms-border-radius:     5px;
  -o-border-radius:     ...