JSFiddle - React, Tailwind, and code Playground

HTML

<div class="subscribe">
    <div id="div-social">Show is avaible</div>
    <div id="show-social">
        <!-- FB like button not Showing while Hover on this (problem with Firefox and IE) --> <span class="fb-like" data-href="http://www.google.com" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></span>

    </div>
</div>

CSS

div#show-social, .subscribe:hover>div#div-social {
    display: none;
}
.subscribe:hover>div#show-social {
    display: block;
}

JavaScript

(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

var subscribe = document.getElementsByClassName("subscribe")[0],
    showSocial = document.getElementById("show-social"),
    rendered = false;

// Wait that facebook script has been loaded
FB.Init = function () {
    // FB variable is now accessible
    subscribe.onmouseover = function () {
        if (!rendered) {
            // Re-render the Facebook like button.
            FB.XFBML.parse(showSocial);
            rendered = true;
        }
    };
};