JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logindiv" >
<form id='loginform' action='login' method='post'>
			<input type="hidden" name="web" value="1">
 			<br><h5>E-mail:</h5>
 			<input id='loginemail' type="email" name="email" required><br>
 			<br><h5>Password:</h5>
 			<input type="password" name="password" required><br><br>
  			<input class="button" name='submit' type='submit' value='Login'>			
  		</form>
</div>

CSS

/* Form wrapper styling */

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font: 700 16px/40px
}

.logindiv {
    background-color:#3f3f3f;
    padding-top:20px; 
    padding-bottom:50px;
    padding-left:50px;
    padding-right:50px;
    text-align:center;
    display: inline-block;
    border: 3px solid #888888;
}

  
.form-wrapper {
    width: 450px;
    padding: 15px;
    margin: 150px auto 50px auto;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
 
/* Form text input */
 
.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;   
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;     
}
 
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
 
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
 
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
 
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}   
 
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;     
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}  
   
.form-wrapper button:hover{    
    background: #e54040;
}  
   
.form-wrapper...