JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<div centering_outer>
    <div centering_inner>
        <!-- Login Form -->
        <form action="login.php" method="post">
            <h1>Anmeldung</h1>
            <input type="text"         name="name"        placeholder="Username:" autocomplete="off" /><br />
            <input type="password"  name="password" placeholder="Passwort:" autocomplete="off" style="width:196px;" />
            <input type="submit" value="Login" style="width:100px;" />
        </form>
    </div>
</div>

</body>

</html>

CSS

html, body {
    margin:0;
    padding:0;
    
    background-color:#eee;
    background-image:-webkit-radial-gradient(#fff,#ccc);
    background-image:      -o-radial-gradient(#fff,#ccc);
    background-image:-webkit-radial-gradient(#fff,#ccc);
    background-image:-webkit-radial-gradient(#fff,#ccc);
}

/* HORIZONTAL & VERTICAL CENTERING */
div[centering_outer] {
    display:table;
    position:absolute;
    
    width:100%;
    height:100%;
}

div[centering_inner] {
    display:table-cell;
    
    vertical-align:middle;
    text-align:center;
}

/* HEADLINES */
h1,h2,h3,h4,h5 {
    font-family:Verdana, Geneva, sans-serif;
    color:#333;
    
    text-shadow:0 0 3px #aaa;
}

h1 {font-size:24px;}
h2 {font-size:20px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
h5 {font-size:16px;}

input[type="text"], input[type="password"] {
    width:300px;
    height:30px;
    
    margin:0;
    margin-top:10px;
    padding:5px 10px;
    
    background-color:rgba(255,255,255,0.7);
    
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:18px;
    
    color:#333;
    
    outline:none;
    
    border:1px solid #eee;
    border-radius:5px;
    
    box-shadow:0 0 2px rgba(0,0,0,0.2), 0 0 10px rgba(0,0,0,0.2);
    
            transition:box-shadow .1s ease-out, background-color .2s ease-out, border .2s ease-out;
    -webkit-transition:box-shadow .1s ease-out, background-color .2s ease-out, border .2s ease-out;
       -moz-transition:box-shadow .1s ease-out, background-color .2s ease-out, border .2s ease-out;
         -o-transition:box-shadow .1s ease-out, background-color .2s ease-out, border .2s ease-out;
}

input[type="text"]:hover, input[type="password"]:hover {    box-shadow:0 0 2px rgba(0,0,0,0.4), 0 0 10px rgba(0,0,0,0.3);    }
input[type="text"]:focus, input[type="password"]:focus {    box-shadow:0 0 2px rgba(0,0,0,0.4), 0 0 10px rgba(0,0,0,0.4); background-color: rgba(255,255,255,1);    }

input[type="button"], input[type="submit"] {
   ...