JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<script src="https://webaudiodemos.appspot.com/midi-synth/js/platform.js"></script>
<script src="https://webaudiodemos.appspot.com/midi-synth/js/midi.js"></script>
<script src="https://webaudiodemos.appspot.com/midi-synth/js/waveshaper.js"></script>
<script src="https://webaudiodemos.appspot.com/midi-synth/js/synth.js"></script>
<script src="https://webaudiodemos.appspot.com/midi-synth/js/ui.js"></script>
<link rel="import" href="webcomponents/polymer.html">
    <link rel="import" href="webcomponents/controls.html">
		
<div id="synthbox">
</div>
<div id="keybox" touch-action="none">
  <div id="blackkeys">
    <span id="k61" class="black key"></span>
    <span id="k63" class="black key">

    </span>
    <span class="spacer"></span>
    <span id="k66" class="black key"></span>

    <span id="k68" class="black key"></span>
    <span id="k70" class="black key"></span>
    <span class="spacer"></span>
    <span id="k73" class="black key"></span>
    <span id="k75" class="black key"></span>
    <span class="spacer"></span>
    <span id="k78" class="black key"></span>
    <span id="k80" class="black key"></span>
    <span id="k82" class="black key"></span>

  </div>
  <span id="k60" class="white key"></span>
  <span id="k62" class="white key"></span>
  <span id="k64" class="white key"></span>
  <span id="k65" class="white key"></span>
  <span id="k67" class="white key"></span>
  <span id="k69" class="white key"></span>
  <span id="k71" class="white key"></span>
  <span id="k72" class="white key"></span>
  <span id="k74" class="white key"></span>
  <span id="k76" class="white key"></span>
  <span id="k77" class="white key"></span>
  <span id="k79" class="white key"></span>
  <span id="k81" class="white key"></span>
  <span id="k83" class="white key"></span>

</div>
<div id="githubnotice"><a href="http://github.com/cwilso/midi-synth">Fork my code on Github</a></div>
<div id="MIDIPlugin"></div>

CSS

body {
	  background-color: #999999;
	  overflow: hidden;
	  font: 12px 'Syncopate', sans-serif;
	}

	#draw {
	  height: 500px;
	}

	#synthbox {
	  position: relative;
	  width: 893px;
	  height: 380px;
	  background: #222222;
	  border: 3px solid blue;
	  border-radius: 10px
	}

	.loaded#synthbox {
	  border-color: #AAA;
	}

	/*
    webaudio-knob { margin-left: 8px;}
*/
	.error#synthbox {
	  border-color: red;
	}

	.section {
	  position: absolute;
	}

	.knobContainer {
	  position: absolute;
	  /*        width: 100px; 
        height:100px; 
*/
	  overflow: visible;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}

	.knobLabel {
	  /* 
        position:absolute; 
        left: 0px; 
        top: 85px; 
        width:100px; 
        */
	  font-weight: bold;
	  text-align: center;
	  color: white
	}

	.section {
	  color: white;
	}

	.dropdownContainer {
	  position: absolute;
	}

	.dropdownLabel {
	  position: absolute;
	  left: 3px;
	  top: 0px;
	  font-weight: bold;
	}

	.dropdownSelect {
	  position: absolute;
	  left: 0px;
	  top: 15px;
	  font: 12px 'Syncopate', sans-serif;
	}

	#keybox {
	  width: 910px;
	  margin-left: -7px;
	  text-align: center;
	}

	#blackkeys {
	  position: absolute;
	  z-index: 2;
	  padding-left: 10px;
	  margin-left: 41px;
	  width: 806px;
	  height: 0px;
	}

	.key {
	  display: inline-block;
	}

	.black {
	  background: black;
	  width: 40px;
	  height: 150px;
	  margin: 0px 11px;
	  border-bottom-right-radius: 5px;
	  border-bottom-left-radius: 5px;
	}

	.spacer {
	  display: inline-block;
	  width: 62px;
	  height: 0;
	}

	.white {
	  background: white;
	  width: 60px;
	  height: 250px;
	  border: 1px solid black;
	  border-bottom-right-radius: 5px;
	  border-bottom-left-radius: 5px;
	}

	.pressed {
	  background: gray
	}

	#githubnotice {
	  width: 910px;
	  text-align: center;
	  font-size: 14px;
	  margin-top: 10px;
	  font-weight: bold;
	}

	#MIDIPlugin {
	  visibility: hidden;
	}

	select {
	  width:...