JSFiddle - React, Tailwind, and code Playground

JavaScript

function test() {

    function a() {
    var dfd = $.Deferred();
      $("#message-quote, #message-person").empty();
      console.log('p1');
      dfd.resolve();
      return dfd.promise();
    };

    function b() {
      console.log('p2 - before getJSON');

     return $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
      
        $("#message-quote").append(a[0].content)
        $("#message-person").append("<p>— " + a[0].title + "</p>")
        console.log('p2');
        // resolve the promise, the call has been completed
      });

    };

    function c() {
     var dfd = $.Deferred();
      $("body, .button, .quote-icons a").css("background-color", "red");
      $(".quote-text").css("color", "red");
      console.log('p3');
      dfd.resolve();
      return dfd.promise();
    };

    var d = $.Deferred(),
    p = d.promise();
    p.then(a).then(b).then(c)
    d.resolve();
  };
  
  test();