JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="v-wrap">
  <div class="quote-container">
    <div class="quote-text">
    </div>
    <div class="quote-author"></div>
    <a id="tweet-quote" class="button"><i class="fa fa-twitter"></i></a>
    <a id="tumblr-quote" class="button"><i class="fa fa-tumblr"></i></a>
    <footer><a href="https://codepen.io/Kestis500">Created by LukasLSC</a></footer>
  </div>
  <div id="new-quote" class="button">New quote</div>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #333;
  color: #333;
  font-family: sans-serif;
}

.v-wrap {
  height: 100%;
  text-align: center;
}

.v-wrap:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}

.quote-container {
  width: 31.25rem;
  background: #fff;
  margin: auto;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.1875rem;
  padding: 2.5rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  opacity: 0;
  transition: height 1s;
}

.quote-text {
  font-size: 1.625rem;
}

.quote-text i {
  margin-right: 0.6rem;
}

.quote-text p {
  display: inline;
}

.quote-author {
  font-size: 1rem;
  margin: 0 0.4rem 2rem 0;
  text-align: right;
}

.button {
  padding: 0.75rem;
  text-align: center;
  font-size: 1em;
  color: #fff;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
  min-width: 1rem;
  min-height: 1rem;
  -webkit-user-select: none;
  user-select: none;
}

.button:hover {
  opacity: 0.8;
}

.button:nth-child(2) {
  margin-left: 0.25rem;
}

.button i {
  vertical-align: middle;
}

#new-quote {
  white-space: nowrap;
  writing-mode: vertical-lr;
  height: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  vertical-align: middle;
  background: #fff !important;
  margin: auto;
  position: relative;
  right: 0.25625rem;
  color: #333;
  opacity: 0;
  transition: height 1s;
}

#new-quote:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0.0625rem;
  bottom: 0;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#new-quote:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

footer {
  position: relative;
  top: 4rem;
  font-size: 0.85rem;
}

footer a {
  position: relative;
  text-decoration: none;
 ...

JavaScript

var start = Date.now();
console.log("Start.", Date.now() - start);

var resizeHeight = function($t, nh, tm) {
  console.log("Start Resize Animation. Target Outer Height: " + $t.outerHeight() + ";", Date.now() - start);
  $t.animate({
    height: nh,
    opacity: 1
  }, tm, function() {
    console.log("Completed Resize Animation, new height: " + nh + ", opacity: 1, after " + tm + "ms", Date.now() - start);
  });
}

var getQuote = function(callback) {
  var colors = [
      "#ff9966",
      "#7f00ff",
      "#396afc",
      "#0cebeb",
      "#06beb6",
      "#642b73",
      "#36d1dc",
      "#cb356b",
      "#3a1c71",
      "#ef3b36",
      "#159957",
      "#000046",
      "#007991",
      "#56ccf2",
      "#f2994a",
      "#e44d26",
      "#4ac29a",
      "#f7971e",
      "#34e89e",
      "#6190e8",
      "#3494e6",
      "#ee0979"
    ],
    randomNumber = Math.floor(Math.random() * colors.length);

  function escapeHtml(text) {
    var map = {
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      '"': "&quot;",
      "'": "&#039;"
    };

    return text.replace(/[&<>"']/g, function(m) {
      return map[m];
    });
  }

  $.ajaxSetup({
    cache: false
  });

  $.getJSON(
    "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&post",
    function(e) {
      console.log("JSON Callback Started.", Date.now() - start);
      var quoteText = $(e[0].content).text(),
        quoteAuthor = e[0].title;

      $(".quote-text").html(
        '<i class="fa fa-quote-left" aria-hidden="true"></i>' + quoteText
      );

      $(".quote-author").html("- " + quoteAuthor);

      $("#tweet-quote").attr(
        "href",
        "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" +
        '"' +
        quoteText +
        '" ' +
        quoteAuthor
      );

      $("#tumblr-quote").attr(
        "href",
        "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=" +
        quoteAuthor +
    ...