JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="Styling.css" />
	<link href='http://fonts.googleapis.com/css?family=Numans' rel='stylesheet'>
    <style>
        html,body{height:100%; margin:0; padding:0}
        body {
            font-family: 'Numans', sans-serif;
			font-size:90%;
            
            background: whiteSmoke;
            background: -moz-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
            background: -webkit-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
            background: -o-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
            background: -ms-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
            background: radial-gradient(ellipse at center, white 0%, #f6f6f6 47%, #ededed 100%);
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=90, style=2);
        }  
      
    </style>
</head>

<form>
<font face="verdana,arial" size=-1>
<center><table cellpadding='2' cellspacing='0' border='0' id='ap_table'>
<tr><td bgcolor="blue"><table cellpadding='0' cellspacing='0' border='0' width='100%'><tr><td bgcolor="blue" align=center style="padding:2;padding-bottom:4"><b><font size=-1 color="white" face="verdana,arial"><b>Admin Login</b></font></th></tr>
<tr><td bgcolor="white" style="padding:5"><br>

<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<center><table>
<tr><td><font face="verdana,arial" size=-1>Login:</font></td><td><input type="text" name="login" required pattern="user123"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Password:</font></td><td><input type="password" name="password" required...