JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns:fb="http://ogp.me/ns/fb#">
<div id="fb-root"></div>
<script>
  (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&appId=388798104496168";
  fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
    
<div id="container">
  <div id="coveriframe"></div>   
  <fb:comments href="http://example.com" num_posts="2" width="470"></fb:comments>
</div>

CSS

#container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #coveriframe {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 3007;
      top: 0; left: 0;
      background: #fff;
      filter: alpha(opacity=0);
      opacity: 0;
    }

    #coveriframe {
        z-index: 3007;
   }