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" style="">
    <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>
  </div>
  <div id="new-quote" class="button">New quote</div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</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;
}

.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: 50%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  vertical-align: middle;
  background: #fff !important;
  margin: auto;
  padding: 2.5rem 0.75rem;
  position: relative;
  right: 0.25625rem;
  color: #333;
  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 {
  font-size: 0.85rem;
}

footer a {
  text-decoration: none;
  color: #fff;
}


/*
footer a:before {
  content: "";
  width: 100%;
  height: 1px;
 ...

JavaScript

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

var getNewQuote = function() {
  $.ajaxSetup({
    cache: false
  });
  var quote = {
    quote: "",
    author: ""
  };
  $.ajax({
    url: "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&post",
    success: function(d) {
      quote.text = $(d[0].content).text().trim();
      quote.author = d[0].title;
    },
    datatype: "json",
    async: false
  });
  console.log("Getting New Quote:", quote.text, quote.author, Date.now() - start);
  return quote;
};

var getRandomColor = function() {
  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);
  return colors[randomNumber];
};

var resizeHeight = function($t, nh, tm) {
  $t.animate({
    height: nh
  }, tm);
};

var updateText = function($t, qt) {

  var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
  twitter += '"' + qt.text + '" ';
  twitter += qt.author;
  twitter = encodeURIComponent(twitter);

  var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
  tumblr += qt.author;
  tumblr += "&content=";
  tumblr += qt.text;
  tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";
  tumblr = encodeURIComponent(tumblr);

  console.log("Update Text: " + $t.attr("class"), Date.now() - start);

  var $icon = $("<i>", {
    class: "fa fa-quote-left",
    "aria-hidden": true
  });

  $t.find(".quote-text").html("").append($icon, qt.text);
  $t.find(".quote-author").html("- " + qt.author);
 ...