JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://apis.google.com/js/platform.js"></script>
<div class="center">
    
    
        
    <div class="g-person" data-width="306" data-href="https://plus.google.com/115886056921704037433" data-rel="author"></div>
        <br>
     <!--<g:hangout render="createhangout"
        invites="[{ id : '115886056921704037433', invite_type : 'PROFILE' },
                  { id : '[email protected]', invite_type : 'EMAIL' }]">
    </g:hangout>-->
    <g:hangout render="createhangout"
        invites="[{ id : '112049531993611369641', invite_type : 'PROFILE' },
                  { id : '[email protected]', invite_type : 'EMAIL' }]">
    </g:hangout>
        
</div>

CSS

.center{
    margin: 0 auto;
    text-align: center;
}

JavaScript

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();