JSFiddle - React, Tailwind, and code Playground

HTML

<div id="openModal" class="modalDialog">
    <div id="mfs">
        <div id="wrapper">
            <div class="invitefriendstext">Invite Friends</div> <a class="invitemodalcompass" href="#close"></a>

            <div class="earntentext">Earn Gold for every
                <br>friend that accepts your invite!</div>
            <div class="coinstext">Gold</div>
            <div class="invitemodalcoinsbalance" label id="selectedFriends">0</div>
            <div class="searchBox">
                <input id="filter" type="text" placeholder="Type your friends name">
            </div>
            <div class="checkBoxcontainer">
                <label name="selectAllFriends" class="myCheckbox">
                    <input type="checkbox" id="selectAllFriends"><span></span>
                </label>
            </div>
            <div class="checkalltext">Check
                <br>all</div>
        </div>
    </div>
</div>
<div id='fb-welcome'></div>

CSS

/* This sets the style/layout of the friends list inside mfsForm.
Could this be causing a conflict with " content mCustomScrollbar"? */
.content { border: 2px solid green; }

 .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;
}

JavaScript

// Log into Facebook's Graph API
function onLogin(response) {
    if (response.status == 'connected') {
        var jQuery = document.createElement('script');
        jQuery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
        document.head.appendChild(jQuery);

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

        // First get the list of friends for this user with the Graph API
        FB.api('/me/invitable_friends?limit=48', function (response) {
            var container = document.getElementById('mfs');
            var mfsForm = document.createElement('form');
            mfsForm.id = 'mfsForm';  // we can leave this
            mfsForm.className = " content mCustomScrollbar mfsForm";
            mfsForm.classList.add("content");          
            mfsForm.classList.add("mCustomScrollbar");

            // Iterate through the array of friends object and create a checkbox for each one.
            for (var i = 0; i < response.data.length; i++) {

                var friendItem = document.createElement('div');
                friendItem.id = 'friend_' + response.data[i].id;
                friendItem.style.cssText = "width:100px; height:100px; padding:7px; color:#FFF;"
                friendItem.style.cssFloat = "left";
                friendItem.innerHTML = '<input type="checkbox" name="friends" value="' + response.data[i].id + '" />';

                var img = document.createElement('img');
                img.src = response.data[i].picture.data.url;
                img.style.cssText = 'width: 70px;height: 70px;'
                friendItem.appendChild(img);

                var labelName = document.createElement('label');
                labelName.style.cssText = 'font-size: 14px;'
                labelName.innerHTML = response.data[i].name;
               ...