JSFiddle - React, Tailwind, and code Playground

HTML

<input id="basic" type="submit" value="basic" />
<input id="async" type="submit" value="async" />
<input id="sync" type="submit" value="sync" />

JavaScript

// BASIC

var randColor = function() {
    return '#' + Math.floor(Math.random()*999);
};

$('input#basic').click(function() {
    $('body').css('background-color', randColor());
});

// ASYNC

var sleep = function(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
};

var asyncRandColor = function(callback) {
    sleep(30000);
    callback(randColor());
};

$('input#async').click(function() {
    asyncRandColor(function(color) {
        $('body').css('background-color', color);
    });
});

// SYNC

var syncRandColor = function() {
    var res;
    asyncRandColor(function(color) {
        res = color;
    });
    while (res === undefined) {
        sleep(300);
    }
    return res;
}

$('input#sync').click(function() {
    $('body').css('background-color', syncRandColor());
});