JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <div class="container-fluid">
        <div class="block">
            <div class="quote">
                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</h2>
                <footer>Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </footer>
                <br>
            </div>
            <div class="row">
                <button type="button" id="getMessage" class="btn btn-primary twitter-share-button">New Quote</button>
            </div>
            <div id="tweetBtn">
                <br>
                <a class="twitter-share-button" href="http://twitter.com/share" data-size="large" data-text="texto" data-hashtags="freecodecamp" data-show-count="false">Share</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            </div>
        </div>


    </div>
</body>

CSS

body {
    background: orange;
}

.block {
    left: 30%;
    width: 40%;
    height: 35%;
    top: 30%;
    position: absolute;
    text-align: center;
}

JavaScript

$(document).ready(function() {

    function pastelColor() { // LBH QVQ VG!
        var newArr = '';
        for (var i = 0; i < 6; i++) {
            var random = Math.floor((Math.random() * 10) + 1);
            newArr += String.fromCharCode((random % 5) + 65);
        }
        return newArr;
    }
    
    function randomQuote(){
    	$("body").css("background-color", '#' + pastelColor());
        // $("body").css("background-color", '#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1));
        $.getJSON("quotes.json", function(json) {
            var html = "";

            var random = Math.floor((Math.random() * Object.keys(json).length) + 1);

            while (json[random].quote.length > 150) {
                random = Math.floor((Math.random() * Object.keys(json).length) + 1);
            }

            html += "<h2>" + json[random].quote + "</h2>";
            html += "<footer>" + json[random].author + " in <cite>" + json[random].source + "</cite></footer><br>";

            // Thanks to chris-francis from Stackoverflow for providing the solution above!
            // http://stackoverflow.com/questions/10486354/dynamically-change-tweet-button-data-text-contents

            ev.preventDefault();
            $('#tweetBtn iframe').remove();
            var tweetBtn = $('<a></a>')
                .addClass('twitter-share-button')
                .attr('data-size', 'large')
                .attr('data-hashtags', 'freecodecamp')
                .attr('href', 'http://twitter.com/share')
                .attr('data-text', json[random].quote + " by " + json[random].author);
            $('#tweetBtn').append(tweetBtn);
            twttr.widgets.load();

            $(".quote").html(html);
        });
    }

    $("#getMessage").on("click", randomQuote);
    
    randomQuote();
});