JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="home">
        <div id="header"></div>
        <div id="content">
            <div class="social" id="social">
                
<h1><span style="color:#ffffff;">Register now to use our free WiFi service.</span></h1>

                <p class="subtitle"><span style="color:#ffffff;">Connect using a social profile</span>

                </p>
                <div style="text-align:center; padding-bottom:15px;">
                    <div class="floating_container">
                        <div class="absolute_container">
                            <!--Facebook--><a class="xbtn ui-link" href="#" id="facebook_login" onclick="facebookLoginSelected();" type="button" value="Facebook"><img alt="Facebook" height="56" src="//manager.odyssys.net/account/images/globalreach/portalimages/facebook.png" style="margin-left:10px; margin-right:10px" title="Facebook" width="56"></a>

                        </div>
                    </div>
                </div>
                <div class="big block" id="onetimeaccess_container_or">
                    <img alt="" class="orImage" height="44" id="orImage" src="//manager.odyssys.net/account/images/globalreach/portalimages/or.png" width="44">
                </div>
                <p class="subtitle">Register with your email address</p>
                <form action="http://manager.odyssys.net/account//captivePortal/emailonly/46334946" id="email_only_registration_submit_form" method="post" onsubmit="event.preventDefault(); return emailOnlyAccessSelected();">
                    <p>
                        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
                            <input class="required" id="emailonly_firstname" name="firstName" placeholder="Please enter your first name*" type="text">
                        </div>
                        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
                            <input class="required"...

CSS

* {
     font-family: Segoe UI;
 }
 #header {
     border: none;
     height: 56px;
     padding-top: 0px;
     padding-bottom: 0px;
     background-color: #D9D3C6;
     box-shadow: none;
 }
 #content {
     text-align: center;
     border-width: 0;
     overflow: visible;
     overflow-x: hidden;
     padding: 1em;
     padding-top: .5em;
     max-width: 768px;
     margin: 0 auto;
     background-color: rgba(19, 23, 23, 0.38);
     border-radius: 26px;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
 #poweredby {
     font-size: 12px;
     color: #000;
     position: absolute;
     left: 10%;
     right: 10%;
     bottom: 10px;
     height: 40px;
     line-height: 40px;
     text-align: center;
 }