JSFiddle - React, Tailwind, and code Playground

by TrevorBurnham

HTML

<div id="container">
  <div id="buttons">
    <button id="readyButton">Ready</button>
    <button id="setButton">Set</button>
    <button id="goButton">Go!</button>
  </div>
</div>

CSS

#container {
  margin: 20px;  
}

#buttons {
  margin: 20px 46px;  
}

button {
  width: 100px;
  height: 30px;
  cursor: pointer;
}

JavaScript

var readying = new $.Deferred();
var setting  = new $.Deferred();
var going    = new $.Deferred();

$('#readyButton').click(readying.resolve);
$('#setButton').click(setting.resolve);
$('#goButton').click(going.resolve);

$.when(readying, setting, going).done(function() {
  $('#container').append('<img src="http://www.prguitarman.com/comics/poptart1red1.gif">');
});