JSFiddle - React, Tailwind, and code Playground

HTML

<head>

<title>Login, Infidel</title>

        <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="ie.css" />                
        <![endif]-->
            
</head>
<body>

    <div id="wrapper">
        <!--div class="outerBG">
            <div class="innerBG"-->
                <form id="formWrapper" method="post" action="">
                    <h2>LOGIN, INFIDEL !</h2>
                        <input type="text" name="username" id="username" placeholder="Username"/>
                        <input type="password" name="password" id="password" placeholder="Password" />
                        <label>
                            <input type="checkbox" id="remember" name="remember" /> Remember me
                        </label>
                        <input type="submit" class="login" value="Login" />
                </form>
            <!--/div>
        </div-->
    
    <div class="hiddenError"><input type="hidden" name="action" value="set_login"><?php echo $msg; ?></div>
        
    </div>

CSS

html {
    width: 100%;
    height: 100%;
    background-image: -moz-radial-gradient(50% 50%, farthest-side, #546673, #1f242a);
    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 700, from(#546673), to(#1f242a));
    background-image: -o-linear-gradient(#1f242a, #546673);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#546673', endColorstr='#1f242a');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f242a', endColorstr='#546673')";
    background-image: radial-gradient(top, #546673, #1f242a);
}

    #wrapper {
            width: 350px;
            margin: 15% auto;
            padding: 0;
            position: relative;
        }
    
        #formWrapper {
    

          }

    
    
          #formWrapper h2 {
              font-family: Tahoma;
              font-weight: bold;
              color: #617798;
              margin: 0 0 15px 0;
          }

      input {
          width: 93.5%;
          font: normal 13px/100% Verdana, Tahoma, sans-serif;
          padding: 10px;
          margin: 0 0 10px 0;
          border: 1px solid #e5e5e5;
          background: #fff;
          background: -webkit-gradient(linear, left top, left 25, from(#fff), color-stop(4%, #eee), to(#fff));
          background: -moz-linear-gradient(top, #fff, #eee 1px, #fff 25px);
          box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
              -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
              -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
      }
      
          input:hover,
          input:focus {
              border-color: #c9c9c9;
                  -webkit-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;
          } 
          
          input:focus { border-color: #999 !important; }
  
              input::-webkit-input-placeholder { color: #c4c4c4; }
              input:-moz-placeholder { color: #c4c4c4; }
      
        label {
            width: 75%;
            float: left;
            margin-top:...