JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

      <div class="grid grid-pad">
        <section class="col-1-1">
            <h2>Playground</h2>
            <div class="playground grid">
              <div class="col-1-1 viewport">
                  <div class="tlt">
                    <ul class="texts" style="display: none">
                      <li>Grumpy wizards make toxic brew for the evil Queen and Jack.</li>
                      <li>The quick brown fox jumps over the lazy dog.</li>
                    </ul>
                  </div>
              </div>
              <div class="col-1-1 controls" style="padding-right: 0">
                <form class="grid grid-pad">
                  <div class="control col-1-2">
                    <label>In Animation</label>
                    <select data-key="effect" data-type="in"></select>
                    <select data-key="type" data-type="in">
                      <option value="">sequence</option>
                      <option value="reverse">reverse</option>
                      <option value="sync">sync</option>
                      <option value="shuffle">shuffle</option>
                    </select>
                  </div>
                  <div class="control col-1-2">
                    <label>Out Animation</label>
                    <select data-key="effect" data-type="out"></select>
                    <select data-key="type" data-type="out">
                      <option value="">sequence</option>
                      <option value="reverse">reverse</option>
                      <option value="sync">sync</option>
                      <option selected="selected" value="shuffle">shuffle</option>
                    </select>
                  </div>
                </form>
              </div>
            </div>
        </section>
      </div>

 
<script>/*global jQuery */
/*!	
* FitText.js 1.1
*
* Copyright 2011, Dave Rupert http://daverupert.com
*...

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #282828;
  color: #eee;
  font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 10px 0;
  font-weight: 200;
}

h2 {
  font-size: 1.8em;
  font-weight: 200;
  color: #888;
  letter-spacing: 1px;
} 

section {
  margin-bottom: 20px;
}

p {
  margin: 0;
  line-height: 1.5;
  font-weight: 200;
}

a {
  color: #00aaee;
  text-decoration: none;
}

a:hover {
  color: #0077a2;
  text-decoration: underline;
}

.hide {
  display: none;
}

.decal {
  height: 2px;
  background-color: #000;
  border-bottom: 1px solid #333;
}

.container {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
}

/* EFFECTS
***************/

.glow {
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transition: text-shadow 1s linear;
       -moz-transition: text-shadow 1s linear;
         -o-transition: text-shadow 1s linear;
            transition: text-shadow 1s linear;
}

.glow.in {
  text-shadow: 
    0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8),
    0 0 0.5em rgba(255, 255, 255, 0.3);
}

.fade {
  opacity: 0;
    -webkit-transition: opacity 1s linear;
       -moz-transition: opacity 1s linear;
         -o-transition: opacity 1s linear;
            transition: opacity 1s linear;
}

.fade.in {
  opacity: 1;
}

/* BUTTONS
***************/

.btn {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  display: inline-block;
  text-decoration: none;
  font-weight: 200;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 0.5em;
  padding: 0.8em 1.2em;
  background-color: #ED303C;
  background-image: -moz-linear-gradient(top, #ED303C, #8D121A);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ED303C), to(#8D121A));
  background-image: -webkit-linear-gradient(top, #ED303C, #8D121A);
  background-image: -o-linear-gradient(top,...