JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css">
<div>
<a class="invitebutton" href="#openModal"></a>

</div>
<!--Modal-->
<div id="openModal" class="modalDialog">
    <div id="mfs">
        <div id="wrapper"></div>
    </div>
</div>

CSS

.mfsForm {
    padding-left: 90px;
    position: absolute;
    left: 100px;
    top: 250px;
    font-family:"Bubblegum Sans";
    font-size: 22px;
    text-decoration: none;
    color: #FFF;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    margin: auto;
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 2px solid red;
}
.content {
    border: 2px solid green;
}

JavaScript

window.fbAsyncInit = function () {
    console.log("async init");
    FB = {
        api: function (uri, cb) {
            var data = [];
            for (var i = 1; i < 48; i++)
                data.push({id:i, name:'Friend ' + i, picture:{data:""}});
            cb({data: data})
        }
    }
    onLogin({status: 'connected'})
    return;

    if (0) FB.init({
        appId: 'myappId',
        xfbml: true,
        version: 'v2.3'
    });

    function loadScript(url, cb) {
        var done = false;
        var tmp = document.createElement('script');
        tmp.src = url;
        tmp.onload = tmp.onreadystatechange = function () {
            console.log("onload/readystatechange called");
            if (!done || (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
                done = true;
                tmp.onload = tmp.onreadystatechange = null;
                if (cb) cb(tmp);
            }
        };
        document.head.insertBefore(tmp, document.head.firstChild);
    }

    function onLogin(response) {
        if (response.status == 'connected') {

            if (0) FB.api('/me?fields=first_name', function (data) {
                var welcomeBlock = document.getElementById('fb-welcome');
                welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
            });


            loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js', function () {
                console.log('jQuery loaded');

				invitableFriends();
                
                loadScript('https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js', function () {
                    console.log('mcustomscrollbar loaded');
                    
                    $('.mCustomScrollbar').mCustomScrollbar();
                });
            });
        }
    }

    function invitableFriends() {

        // First get the list of friends for this user with the Graph API
       ...