JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<a href='#' class="opendialog">Open</a>
<div id="loginBox" style="display:none">
        <div>Login/Sign Up</div>
        <div id="loginLogos">
                <a href="/auth/google"><img border="0" alt="Google" src="http://www.racertracks.com/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg"></a>
                <a href="/auth/facebook"><img border="0" alt="Facebook" src="http://runtrax.devbox.com:3000/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png"></a>
                <a href="/auth/twitter"><img border="0" alt="Twitter" src="http://runtrax.devbox.com:3000/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png"></a>
                <a href="/auth/linkedin"><img border="0" alt="LinkedIn" src="http://runtrax.devbox.com:3000/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png"></a>
        </div>
    </div>

CSS

body {
  background-color: gray;
}


#loginBox {
    font-family: 'russo_oneregular';
    font-size: 20px;
    display: inline-block; 
}

#loginBox.a {
  display: inline-block;
}

JavaScript

$(function() {

  $('.opendialog').click(function(){ openDialog(); });
  
	function openDialog() {
      var opt;
    opt = {
      autoOpen: false,
      modal: true,
      width: 'auto',
      dialogClass: 'noTitle',
      focus: function() {
        return $(this).dialog('option', 'width', $('#loginBox').width() + 50);
      }
    };
    $("#loginBox").dialog(opt);
    return $("#loginBox").dialog("open");
  }
  
});